如何设置可编辑 DIV 的样式使其看起来像文本字段？-css教程-PHP中文网

如何设置可编辑 DIV 的样式使其看起来像文本字段？

Mary-Kate Olsen

发布： 2024-12-09 05:56:09

原创

241 人浏览过

How Can I Style an Editable DIV to Look Like a Text Field?

使可编辑的 DIV 类似于文本字段

通常，可能需要允许用户使用以下方式编辑网页的特定部分可编辑的 DIV。然而，DIV 元素天然缺乏指示可编辑性的视觉提示，使用户不确定是否可以与其交互。

为了解决这个问题，可以采用 CSS 样式将可编辑的 DIV 转换为类似标准文本输入字段。幸运的是，现代浏览器提供了模仿本机文本输入控件外观的特定 CSS 属性。

类似文本字段的 DIV 的 CSS 样式

以下 CSS 代码可以应用于 DIV 以赋予其类似文本字段的外观：

#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;
}

登录后复制

此外，可以将特定样式应用于用于增加真实感的 textarea 元素：

textarea {
  height: 28px;
  width: 400px;
}

登录后复制

类似文本字段输入的 CSS 样式

同样，可以使用以下方法将输入样式设置为类似于文本字段下列的CSS:

#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;    
}

登录后复制

input {
  margin-top: 5px;
  width: 400px;
}

登录后复制

输出

生成的 HTML 和 CSS 产生以下输出：

[文本区域和文本区域的图像输入，两者样式都看起来像文本字段]

此样式与 Safari、Chrome 和Firefox，针对 Opera 和 IE9 优雅降级。

以上是如何设置可编辑 DIV 的样式使其看起来像文本字段？的详细内容。更多信息请关注PHP中文网其他相关文章！