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

25 浏览
0 Comments

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

如何使用CSS选择器定位type为\'text\'的输入框？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

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

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

这在IE7及以上版本中受支持。如果您需要支持IE6，则可以使用IE7.js添加支持。

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

0
0 Comments 

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

由于指定默认属性值可能无法始终使用属性选择器选择，因此可以尝试覆盖其他标记的情况，以便呈现文本输入：

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开始支持。

0