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


72

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

我使用了以下代码:

input, textarea {
  background-color: #d1d1d1;
}

1
正如@ Damien-at-SF所说,请使用input [type =“ text”]代替输入。而且还可以使用border: none;规则来避免默认的文本输入边框。
Manolo

Answers:


142
input[type="text"], textarea {

  background-color : #d1d1d1; 

}

希望有帮助:)

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


真好!在输入字段中有边框效果,但没有textarea吗?
3D-kreativ 2011年

为什么同时使用input[type="text"]textarea
2014年

1
它们是2个单独的标记,需要分别寻址...input[type="text"]不寻址textarea字段。
Damien-Wright

嗨,达米安,让我知道一件事,我有表格,我需要从客户那里获取颜色详细信息,就像客户可以选择两种颜色一样,实际上,我有三种颜色,因此他们至少选择两种颜色。
宝石

1
出于某种原因,我的输入字段仅在页面呈现时被样式化。然后,它消失了。
McFloofenbork

9

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

但是,如果必须支持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]而不是input(它将适用于所有输入字段(例如,类型为提交的输入字段))。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.