CSS选择文本输入字段?

我如何能目标输入字段类型的“文本”使用CSS选择器?

当前回答

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属性选择器

因为它指定了默认属性值可能不总是可选的属性选择器，可以尝试覆盖其他情况的标记，其中文本输入呈现:

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开始的版本。

2010-11-06 16:30:12

其他回答

你可以在这里使用属性选择器:

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

这在IE7及以上版本中得到支持。如果你需要支持IE6，你可以使用IE7.js来增加对它的支持。

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

2010-11-06 16:30:17

输入[type =“text”]

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

2018-10-17 18:41:10

在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;
}

2014-09-09 07:56:41

使用属性选择器，我们的目标是CSS中的输入类型文本

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

2016-12-19 11:07:05

input[type=text]