如何使可编辑的DIV看起来像文本字段？ [英] How do I make an editable DIV look like a text field?

问题描述

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

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 进行样式设置，以使其像文本输入字段一样显示给用户？

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

推荐答案

这些外观与Safari，Chrome和Firefox中的真实内容相同。

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

演示： 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>

输出：

这篇关于如何使可编辑的DIV看起来像文本字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！