How do I make an editable DIV look like a text field?

by

These look the same as their real counterparts in Safari, Chrome, and Firefox. They degrade gracefully and look OK in Opera and IE9, too.

Demo: http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS:

textarea {
    height: 28px;
    width: 400px;
}

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

input {
    margin-top: 5px;
    width: 400px;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

HTML:

<textarea>I am a textarea</textarea>
<div id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

Output:

enter image description here

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Set width on div
  3. How to Make columns in row [closed]
  4. How to add images in select list?
  5. Is it wrong to change a block element to inline with CSS if it contains another block element?
  6. How to position text over an image with CSS
  7. :last-child not working as expected?
  8. Why is my Grid element’s height not being calculated correctly?
  9. Media Queries for Different zoom Levels of Browser
  10. Page numbers with CSS/HTML
  11. HTML5 input type range show range value
  12. Jenkins – HTML Publisher Plugin – No CSS is displayed when report is viewed in Jenkins Server
  13. Creating a CSS3 box-shadow on all sides but one
  14. Weird effect when applying transparent border over an element with a gradient background
  15. Why does CSS work with fake elements?
  16. padding is not working in Safari and IE in select list
  17. Deploying just HTML, CSS webpage to Tomcat
  18. Center form submit buttons HTML / CSS
  19. Why is a trailing punctuation mark rendered at the start with direction:rtl?
  20. CSS object-fit: contain; is keeping original image width in layout
  21. Remove scrollbar from iframe
  22. Flexbox on IE11: image stretched for no reason?
  23. CSS animate custom properties/variables
  24. How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?
  25. Firefox 30 is not hiding select box arrows anymore
  26. extra space when centering elements using flexbox
  27. @Media print css
  28. Why would Google use a font tag?
  29. Styling the “ element in CSS?
  30. inline-block element with no text renders differently

Leave a Comment