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?

background: white; border: 1px solid #666; cursor: text; ? :P see [my demo](http://jsfiddle.net/ZevvE/) — mkk, Jan 21 '12 at 20:49
I suppose make it look like a `textarea`? http://jsfiddle.net/vwPgT/ — Jared Farrish, Jan 21 '12 at 20:51
@mkk - Might help a *little* if you added some sample text: http://jsfiddle.net/ZevvE/1/ — Jared Farrish, Jan 21 '12 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 '12 at 21:04
@mkk - I *personally* think my demo is clearer, but hey, it is what it is. — Jared Farrish, Jan 21 '12 at 21:06

ThinkingStiff · Accepted Answer · 2012-01-21T23:55:10.310

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

edited Jan 21 '12 at 23:55

answered Jan 21 '12 at 23:09

ThinkingStiff

64,767
30
146
239

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 02 '12 at 14:17
1

@Hengjie Those are the default styles that the browsers use when displaying input fields. – ThinkingStiff Jul 02 '12 at 18:53
to make this work proper in IE9 add another div inside textarea div.like this.
I look like textarea
– user10 Oct 09 '12 at 06:44
1

here is an usecase, try do a copy paste html contents in them. You will see the difference. – Praveen Sep 30 '14 at 05:42
Is it possible to get the cursor position from the text-area lookalike? – Stefan Falk Mar 12 '16 at 22:12
1

Should also add - background:white; – Brana Apr 26 '16 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 '16 at 10:50
I can not find any information about `-webkit-small-control`. Who can give me some information? – Lin Du Jun 08 '17 at 02:11
1

It's not the same. The div can accept formating, like bold, etc. – Nathan B Apr 13 '19 at 20:06
If I'm not mistaken, the design has also changed slightly over the years. At least for the input field. The corners look rounded. – qräbnö Apr 24 '21 at 20:18
Perfect one. I found one missing feature, that is in textarea when it reaches the border it breaks word into new line, but not with the above solution. Any one looking for that? use `overflow-wrap: break-word;` – Mathews Sunny Dec 23 '21 at 14:46

score 25 · Answer 2 · edited Apr 21 '16 at 21:54

25

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

class="form-control"

edited Apr 21 '16 at 21:54

αƞjiβ

3,056
14
58
95

answered Apr 21 '16 at 20:54

paraplu

251
3
7

This is a great answer and I feel is the cleanest. My vote is for this to be the right answer. – aholtry Sep 02 '16 at 15:44
Any way to allow the user to expand the area? Normal textarea does this. – MARS Sep 22 '20 at 18:24

score 14 · Answer 3 · answered Jan 21 '12 at 20:57

14

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

answered Jan 21 '12 at 20:57

Abhi Beckert

32,787
12
83
110

11

Well, that's just too convenient. – Jared Farrish Jan 21 '12 at 20:59

score 3 · Answer 4 · answered Jan 21 '12 at 22:56

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/

answered Jan 21 '12 at 22:56

timing

6,340
1
17
16

score 1 · Answer 5 · answered May 24 '13 at 16:33

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;

score 1 · Answer 6 · answered Dec 19 '14 at 06:41

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>

score 0 · Answer 7 · answered Jan 21 '12 at 20:51

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.

answered Jan 21 '12 at 20:51

wizzard0

1,883
1
15
38

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

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

7 Answers7

Linked