如何使可编辑的DIV看起来像一个文本字段?

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.

我有一个DIV它有contentEditable=true以便用户可以编辑它。问题是它看起来不像一个文本字段，所以用户可能不清楚它是否可以被编辑。

Is there a way that I can style the DIV so that it appears to the user like a text input field?

有没有一种方法可以让DIV看起来像一个文本输入框?

7 个解决方案

#1

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

它们与Safari、Chrome和Firefox中的真实版本看起来是一样的。它们优雅地降级，在Opera和IE9中看起来也不错。

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

演示:http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS:

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:

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:

输出:

#2

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

如果使用bootstrap，只需添加表单控件类。例如:

class="form-control" 

#3

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

在WebKit中，你可以做到:-webkit-appearance: textarea;

#4

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/

我从Jarish: http://jsfiddle.net/ZevvE/2/更新了jsfiddle

#5

I would suggest this for matching Chrome's style, extended from Jarish's example. Notice the cursor property which previous answers have omitted.

我建议用这个来匹配Chrome的风格，它是从Jarish的例子扩展而来的。注意前面的答案忽略的光标属性。

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;

#6

You can place a TEXTAREA of similar size under your DIV, so the standard control's frame would be visible around div.

您可以在DIV下放置类似大小的TEXTAREA，因此标准控件的框架将在DIV周围可见。

It's probably good to set it to be disabled, to prevent accidental focus stealing.

最好将其设置为禁用，以防止意外的焦点窃取。

#7

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:

所有这些问题的问题是，如果文本行长且宽得多，而div overflow:auto没有合适的滚动条。我找到了一个完美的解决方案:

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。一个内部div，它足够宽来处理最宽的一行文本，然后是一个较小的外部div，它在内部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>