用于文本输入字段的CSS选择器？

Question

如何使用CSS选择器来定位'text'类型的输入字段？

Answer 1

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#attribute-selectors

---

因为it is specified是默认的属性值可能并不总是选择与属性选择，一个可以尝试覆盖标记的其他情况下，针对文本输入渲染：

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])... 

之一，但这个选择将是非常可笑的，也是list of possible types与新功能被添加到HTML增长的所有输入。

注意：:not pseudo-class仅支持从IE9开始。

Answer 2

您可以使用属性选择在这里：

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

这是支持IE7及以上。如果您需要支持IE6，您可以使用IE7.js为此添加支持。

参见：http://reference.sitepoint.com/css/attributeselector了解更多信息

Answer 3

我通常在我的主要样式表使用选择，然后进行，增加了一个类，所有的输入类型的IE6具体的.js（jQuery的）文件。例如：

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

然后只是在ie6特定样式表中使用类复制我的样式。这样，实际的标记就有点干净了。

Answer 4

您可以使用:text选择器选择与文本类型所有输入

Working Fiddle

$(document).ready(function() { 
    $(":text").css({ //or $("input:text") 
     'background': 'green', 
     'color':'#fff' 
    }); 
}); 

:text是一个jQuery扩展和不CSS规范的一部分，使用查询：文本不能利用本机DOM querySelectorAll（）方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用[type="text"]。这将适用于IE6+。

$("[type=text]").css({ // or $("input[type=text]") 
    'background': 'green', 
    'color':'#fff' 
}); 

CSS

[type=text] // or input[type=text] 
{ 
    background: green; 
} 

Answer 5

由于@Amir时下上面贴的最佳方式 - 跨浏览器和留下IE6 - 是使用

[type=text] {} 

没有人提及的低级CSS特异性（whyisthatimportant？）到目前为止，[type=text]features 0,0,1,0而不是0,0,1,1与input[type=text]。

从表现上看，没有任何负面影响。

normalize v4.0.0刚刚发布with lowered selector specificity。

Answer 6

我有一个表格行字段中的输入类型文本字段。我与代码

.admin_table input[type=text]:focus 
{ 
    background-color: #FEE5AC; 
} 

Answer 7

随着属性选择瞄准它，我们的目标在CSS

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