405

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

4

9 回答 9

721 
input[type=text]

或者，限制表单内的文本输入

form input[type=text]

或者，进一步限制为某种形式，假设它有 idmyForm

#myForm input[type=text]

注意：IE6 不支持此功能，因此如果您想为 IE6 开发，请使用 IE7.js（如 Yijiang 建议的那样）或开始为所有文本输入添加类。

参考：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中，可能的类型列表也在增加。

注意：:not伪类只支持从 IE9 开始。

于 2010-11-06T16:30:12.933 回答
45

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

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

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

请参阅：http ://reference.sitepoint.com/css/attributeselector了解更多信息

于 2010-11-06T16:30:17.990 回答
13

我通常在我的主样式表中使用选择器，然后制作一个特定于 ie6 的 .js (jquery) 文件，为所有输入类型添加一个类。例子：

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

然后只需使用类在 ie6 特定样式表中复制我的样式。这样实际的标记就更干净了。

于 2010-11-06T19:26:24.003 回答
8

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

工作小提琴

$(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-09T07:56:41.893 回答
2

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

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
于 2016-05-24T06:57:28.513 回答
0

正如@Amir 上面发布的那样，当今最好的方法——跨浏览器并抛弃 IE6——是使用

[type=text] {}

到目前为止，没有人提到较低的 CSS 特异性（为什么 这很 重要？），功能0,0,1,0 而不是 0,0,1,1 和. [type=text] input[type=text]

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

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

于 2016-04-05T23:05:17.077 回答
0

使用属性选择器，我们在 CSS 中定位输入类型文本

input[type=text] {
background:gold;
font-size:15px;
 }
于 2016-12-19T11:07:05.607 回答
0

输入[类型=文本]

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

于 2018-10-17T18:41:10.217 回答
-2

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

[title] 所有具有title 属性的元素都被选中。

[title=banana] 具有 title 属性的 'banana' 值的所有元素。

[title~=banana] 所有在 title 属性值中包含 'banana' 的元素。

[title|=banana] 所有title属性值以'banana'开头的元素。

[title^=banana] 所有title属性值以'banana'开头的元素。

[title$=banana] 所有title属性值以'banana'结尾的元素。

[title*=banana] title 属性值包含子字符串“banana”的所有元素。

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

于 2018-04-11T06:52:49.783 回答