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

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

#1楼

您可以使用:text Selector选择所有带有文本类型的输入

$(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;
}

#2楼

正如@Amir上面发布的那样，现在最好的方式 - 跨浏览器并留下IE6 - 就是使用

[type=text] {}

没有人提及的低级CSS特异性（为什么是那个重要？）到目前为止， [type=text] 功能 0,0,1,0，而不是0,0,1,1与input[type=text] 。

在性能方面，不再有任何负面影响。

标准化v4.0.0刚刚发布，选择器特异性降低。

#3楼

我在表行字段中输入了类型文本字段。我用代码来定位它

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

#4楼

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 pseudo-class 。

#5楼

您可以在此处使用属性选择器：

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

IE7及更高版本支持此功能。如果需要支持IE6，可以使用IE7.js添加对此的支持。

有关更多信息，请参阅： http ： //reference.sitepoint.com/css/attributeselector

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3187691

标签

ie7.js

jquery

Pseudo