文本输入框的CSS选择器是什么？

Question

文本输入框的CSS选择器是什么？

htmlcssformscss-selectorshtml-input

439

我该如何使用CSS选择器来选中文本输入框？

- Yarin

8个回答

48

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

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

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

详情请参见：http://reference.sitepoint.com/css/attributeselector

- Yi Jiang

13

我通常在主样式表中使用选择器，然后创建一个针对ie6的特定于.js(jQuery)文件，将类添加到所有输入类型。例如：

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

然后只需在ie6专用样式表中使用这些类来复制我的样式。这样实际的标记就会更清晰一些。

- garrettwinder

2

这非常缓慢。 - Hidayt Rahman

11

在jQuery中，您可以使用: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;
}

- Aamir Shahzad

2

正如 @Aamir 提到的那样，现在最好的方法 - 跨浏览器且不再支持IE6 - 是使用以下内容：

[type=text] {}

没有人提到CSS特异性更低（为什么那很重要？）吗？[type=text] 特性是0,0,1,0，而不是使用 input[type=text] 的 0,0,1,1。

就性能而言，现在已经没有任何负面影响了。

normalize v4.0.0刚刚发布，降低了选择器的特异性。

- Volker E.

2

我想要在表格行内样式化文本输入框。我使用了以下代码：

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

- Amit Mhaske

0

input[type="text"]

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

- Navneet Kumar

这并没有为其他答案增添任何内容。 - mfluehr

-1

使用属性选择器在CSS中定位文本输入框

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

- Santosh Khalse

这并没有为其他答案增添任何内容。 - mfluehr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alin Purcaru · Accepted Answer

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伪类。