文本输入字段的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

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

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中.

注意:仅从IE9开始支持:not伪类.

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选择器选择具有文本类型的所有输入

工作小提琴

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

:text是一个jQuery扩展而不是CSS规范的一部分,查询使用:text无法利用本机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;
}