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

有没有一种方法可以让我设置DIV的样式,使其在用户看来就像文本输入字段一样?

推荐答案

它们看起来与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>

输出:

在此处输入图像描述

Html相关问答推荐

使用 jquery 在分页时激活下一个/上一个按钮

类内没有标签的css样式文本

FlexBox 将元素挤压在一起

是否无法在 Bootstrap 5 中更改 的字体系列?

从网站获取用于抓取地址的相关标签

为什么 Bootstrap 折叠功能不起作用?

CSS 位置:粘性;在另一个 div 的开头停止粘滞

溢出自动和空白的问题:nowrap 和 flexbox

用图像浮动 div 会产生额外的空间

如何按元素的水平对齐文本?

如何在不使用 indexof 的情况下使material 徽章代码更简单、更容易

CSS网格样式

类似 StackOverflow 的响应式导航栏

使用smoke动画减小ring大小

如何使标题响应?

如何更改“唯一元素”的间距

CSS“max-height”是否只能工作 1 级深度?如果是这样,如何自动滚动嵌套的 Web 布局?

根据 HTML 属性设置元素的样式

使 div 在 flexbox 内可滚动

CSS:在flexbox的第二行插入图标