我如何能目标输入字段类型的“文本”使用CSS选择器?


当前回答

你可以在这里使用属性选择器:

input[type="text"] {
    font-family: Arial, sans-serif;
}

这在IE7及以上版本中得到支持。如果你需要支持IE6,你可以使用IE7.js来增加对它的支持。

更多信息请参见:http://reference.sitepoint.com/css/attributeselector

其他回答

input[type=text]

或者,限制表单内的文本输入

form input[type=text]

或者,进一步限制到某个表单,假设它有id myForm

#myForm input[type=text]

注意:这是IE6不支持的,所以如果你想为IE6开发,要么使用IE7.js(正如Yi Jiang建议的那样),要么开始在所有文本输入中添加类。

参考:http://www.w3.org/TR/CSS2/selector.html属性选择器


因为它指定了默认属性值可能不总是可选的属性选择器,可以尝试覆盖其他情况的标记,其中文本输入呈现:

input:not([type]), /* type attribute not present in markup */
input[type=""],    /* type attribute present, but empty    */
input[type=text]   /* type is explicitly defined as 'text' */

当定义了类型,但有一个无效值,并且仍然回落到type="text"时,仍然会出现这种情况。为了解决这个问题,我们可以使用选择所有不是其他已知类型之一的输入

input:not([type=button]):not([type=password]):not([type=submit])...

但是这个选择器是非常荒谬的,而且可能的类型列表随着添加到HTML中的新功能而不断增长。

注意:not伪类只支持IE9开始的版本。

使用属性选择器,我们的目标是CSS中的输入类型文本

input[type=text] {
background:gold;
font-size:15px;
 }

你可以在这里使用属性选择器:

input[type="text"] {
    font-family: Arial, sans-serif;
}

这在IE7及以上版本中得到支持。如果你需要支持IE6,你可以使用IE7.js来增加对它的支持。

更多信息请参见:http://reference.sitepoint.com/css/attributeselector

正如@Aamir提到的,现在最好的方法——跨浏览器,抛弃IE6——是这样的:

[type=text] {}

还没有人提到CSS的低特异性(为什么这很重要?)[type=text]的输入为0,0,1,0,而不是0,0,1,1。

就性能而言,再也没有负面影响了。

Normalize v4.0.0刚刚发布,降低了选择器的特异性。

我通常在我的主样式表中使用选择器,然后制作一个ie6特定的.js (jquery)文件,该文件将一个类添加到所有输入类型中。例子:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

然后使用类在ie6特定的样式表中复制我的样式。这样,实际的标记会更简洁一些。