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

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

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规范的一部分，查询使用：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;
}

Answer 5

我在表格行字段中输入了输入文本字段。我用代码

定位它

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

Answer 6

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

[type=text] {}

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

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

规范化v4.0.0刚发布with lowered selector specificity。

Answer 7

使用属性选择器，我们在CSS

中定位输入类型文本

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

Answer 8

input [type = text]

这将选择网页中的所有输入类型文本。

Answer 9

属性选择器通常用于输入。这是属性选择器列表：

[标题] 选择具有title属性的所有元素。

[标题=香蕉] 所有含有香蕉的元素都是＆＃39;香蕉。 title属性的值。

[标题〜=香蕉] 包含＆＃39; banana＆＃39;的所有元素在title属性的值中。

[标题| =香蕉] 标题属性值的所有元素都以＆＃39; banana＆＃39;。

开头

[标题^ =香蕉] title属性值的所有元素都以＆＃39; banana＆＃39;。

开头

[标题$ =香蕉] title属性值的所有元素都以＆＃39; banana＆＃39;

结尾

[标题* =香蕉] title属性值的所有元素都包含子串＆＃39; banana＆＃39;。

参考：https://kolosek.com/css-selectors/

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

9 个答案: