我有一个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相关问答推荐

在 Select 前后更改选项卡的背景

通过动态div的对角线

如何在垂直堆叠的表格中调整人造列的大小?

如何在R中渲染Quarto文档时动态设置html文件名

仅在过渡之前删除填充

旧文本淡出,但新文本不会淡入,而是突然出现

如果最后一行的卡数少于其他行,则在使用flex grow使卡在调整大小时拉伸后,flex卡的宽度将被拉伸

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

复制两个

会产生一个空行;复制

元素不会

对齐列表项内的文本,使其不在元素装饰下

SVG 填充 colored颜色 不使用轮廓填充空白区域

如何垂直对齐列表中的图像和文本?

pull-right 不适用于 bootstrap alert 内的按钮

如何制作一个布局,其中左侧固定为图像,右侧为按钮,中心或中间位置为文本?

CSS:第一个类型的伪类没有按预期工作

文本溢出:省略号不适用于 flexbox

如何在 svelte 中对静态 html 文件使用href=

html元素可以被css跳过吗?

Svelte 将 svg 作为组件导入工作很奇怪

术语...未被识别为 cmdlet 与代码的名称. *四开本*