97

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?

5
  • 2
    background: white; border: 1px solid #666; cursor: text; ? :P see my demo
    – mkk
    Jan 21, 2012 at 20:49
  • I suppose make it look like a textarea? jsfiddle.net/vwPgT Jan 21, 2012 at 20:51
  • 1
    @mkk - Might help a little if you added some sample text: jsfiddle.net/ZevvE/1 Jan 21, 2012 at 21:02
  • @Jared :) good job! ;-) now it is much harder to confuse it with div.. oh it is a div, i forgot :)
    – mkk
    Jan 21, 2012 at 21:04
  • @mkk - I personally think my demo is clearer, but hey, it is what it is. Jan 21, 2012 at 21:06

7 Answers 7

140

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

11
  • 1
    What exactly does -webkit-small-control and medium -moz-fixed do? They seem to make the font look monospaced in Firefox v13.0
    – Hengjie
    Jul 2, 2012 at 14:17
  • 1
    @Hengjie Those are the default styles that the browsers use when displaying input fields. Jul 2, 2012 at 18:53
  • 1
    here is an usecase, try do a copy paste html contents in them. You will see the difference.
    – Praveen
    Sep 30, 2014 at 5:42
  • 1
    Should also add - background:white;
    – Brana
    Apr 26, 2016 at 14:10
  • 1
    What if I want another div inside this div, which I don't want it to be editable?
    – FrenkyB
    Jun 21, 2016 at 10:50
25

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

class="form-control" 
2
  • This is a great answer and I feel is the cleanest. My vote is for this to be the right answer.
    – aholtry
    Sep 2, 2016 at 15:44
  • Any way to allow the user to expand the area? Normal textarea does this.
    – MARS
    Sep 22, 2020 at 18:24
14

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

1
  • 11
    Well, that's just too convenient. Jan 21, 2012 at 20:59
3

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/

1

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;
1

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:

<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>
0

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.

2
  • Yeah, not sure this is what the OP is looking for in the answer. Jan 21, 2012 at 20:54
  • If you want the textfield to scale automatically with the contents of the div this is getting hard.
    – timing
    Jan 21, 2012 at 22:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.