输入和文本字段中的背景颜色

Posted 2023-02-22

【中文标题】输入和文本字段中的背景颜色

【英文标题】：Background color in input and text fields

【发布时间】：2011-08-02 19:51:33

【问题描述】：

我想更改表单的文本和输入字段中的颜色背景，但是当我这样做时，它也会影响提交按钮！是否可以通过其他不影响按钮的方式来完成？

我用过这段代码：

input, textarea 
  background-color: #d1d1d1;

【问题讨论】：

正如@Damien-at-SF 所说，使用 input[type="text"] 而不是 input。但也可以使用border: none; 规则来避免默认的文本输入边框。

【参考方案1】：

最好的解决方案是其他人建议的 CSS (input[type="text"]) 中的属性选择器。

但是如果你必须支持Internet Explorer 6，你就不能使用它（QuirksMode）。好吧，前提是你必须也愿意支持它。

在这种情况下，您唯一的选择似乎是在输入元素上定义类。

<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...

并使用类选择器定位它们：

input.input-box, textarea  background: cyan; 

【参考方案2】：

input[type="text"], textarea 

  background-color : #d1d1d1; 

希望有帮助:)

编辑： 工作示例，http://jsfiddle.net/C5WxK/

【讨论】：

不错！输入框有边框效果，textarea没有？

你为什么同时使用input[type="text"]和textarea？

它们是 2 个独立的标签，需要分别处理...input[type="text"] 不处理 textarea 字段。

嗨，Damien，告诉我一件事，我有表格，我需要从客户那里获取颜色详细信息，比如客户可以选择两种颜色，实际上，我有三种颜色，所以他们至少选择两种颜色。

出于某种原因，我的输入字段仅在页面呈现的那一刻被风格化。然后，它消失了。

【参考方案3】：

您希望限制为文本类型的输入字段，因此请使用选择器 input[type=text] 而不是 input（这将适用于所有输入字段（例如提交类型的字段））。