How to make editable DIV look like a text box?

Question

I have a DIV that has contentEditable=true , so the user can edit it. The problem is that it does not look like a text field, so it may not be clear to the user that it can be edited.

Is there a way I can create a DIV style so that it displays to the user as an input text box?

Answer 1

They 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:

Answer 2

In WebKit you can do: -webkit-appearance: textarea;

Answer 3

If you use bootstrap, just add the form-control class. For example:

 class="form-control" 

Answer 4

You can use the inner shadow of the window:

 div[contenteditable=true] { box-shadow: inset 0px 1px 4px #666; } 

I updated jsfiddle from Jarish: http://jsfiddle.net/ZevvE/2/

Answer 5

I would suggest this to match the Chrome style extended from the Jarish example. Pay attention to the property of the cursor about which the 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; 

Answer 6

You can place a TEXTAREA with the same size under your DIV, so the standard control frame will be visible around the div.

It is probably useful to disable it to avoid accidental focus.

Answer 7

The problem with all this is that they do not address if the lines of text are long and much wider than the div overflow: auto does not declare a scroll bar that works correctly. Here is the perfect solution I found:

Create two divs. The inner div is wide enough to handle the widest line of text, and then the smaller outer one that acts on the holder for the inner div:

 <div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;"> <div style="width:800px;"> now really long text like this can be put in the text area and it will really <br/> look and act more like a real text area bla bla bla <br/> </div> </div>