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

Question

I ve got a DIV which has contentEditable true so the user can edit it   The problem is that it doesn t look like a text field  so it may not be clear to the user that it can be edited   Is there a way that I can style the DIV so that it appears to the user like a text input field

User · Answer

In WebKit  you can do  -webkit-appearance  textarea

User · Answer

You can place a TEXTAREA of similar size under your DIV  so the standard control s frame would be visible around div   It s probably good to set it to be disabled  to prevent accidental focus stealing

User · Answer

I would suggest this for matching Chrome s style  extended from Jarish s example  Notice the cursor property which previous answers have omitted   cursor  text  border  1px solid  ccc  font  medium -moz-fixed  font  -webkit-small-control  height  200px  overflow  auto  padding  2px  resize  both  -moz-box-shadow  inset 0px 1px 2px  ccc  -webkit-box-shadow  inset 0px 1px 2px  ccc  box-shadow  inset 0px 1px 2px  ccc

User · Answer

If you use bootstrap just add form-control class  For example   class  form-control

User · Answer

The problem with all these is they don t address if the lines of text are long and much wider that the div   overflow auto does not ad a scroll bar that works right   Here is the perfect solution I found   Create two divs  An inner div that is wide enough to handle the widest line of text and then a smaller outer one which acts at the holder for the inner div    lt div style  border 2px inset  AAA cursor text height 120px overflow auto width 500px   gt       lt div style  width 800px   gt        now really long text like this can be put in the text area and it will really  lt br  gt       look and act more like a real text area bla bla bla  lt br  gt        lt  div gt   lt  div gt

User · Answer

You could go for an inner box shadow   div contenteditable true      box-shadow  inset 0px 1px 4px  666      I updated the jsfiddle from Jarish  http   jsfiddle net ZevvE 2

User · Answer

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    lt textarea gt I am a textarea lt  textarea gt   lt div id  textarea  contenteditable gt I look like textarea lt  div gt    lt input value  I am an input    gt   lt div id  input  contenteditable gt I look like an input lt  div gt    Output

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

Examples related to html

Examples related to css