如何使可编辑的DIV看起来像文本字段？
如何使可编辑的DIV看起来像文本字段？
提问于 2012-01-22 04:48:12
我有一个带有contentEditable=true的DIV，所以用户可以编辑它。问题是它看起来不像一个文本字段，所以用户可能不清楚它是否可以编辑。
有没有一种方法可以使DIV看起来像一个文本输入字段？
回答 7
Stack Overflow用户
回答已采纳
发布于 2012-01-22 07:09:01
它们看起来与Safari、Chrome和Firefox中的真实对应物相同。它们退化得很优雅，在Opera和IE9中看起来也不错。
演示：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>输出：
Stack Overflow用户
发布于 2016-04-22 04:54:50
如果使用bootstrap，只需添加form-control类。例如：
class="form-control" Stack Overflow用户
发布于 2012-01-22 04:57:42
在WebKit中，您可以这样做：-webkit-appearance: textarea;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8956567
复制相关文章
相似问题
腾讯云开发者
