【发布时间】：2011-05-06 01:33:49
【问题描述】：
如何使用 CSS 选择器定位“文本”类型的输入字段？
【问题讨论】：
标签： html css forms css-selectors html-input
【发布时间】：2011-05-06 01:33:49
【问题描述】：
input[type=text]
或者，限制表单内的文本输入
form input[type=text]
或者，进一步限制为某种形式，假设它的 id 为 myForm
#myForm input[type=text]
注意：IE6 不支持此功能，因此如果您想为 IE6 开发，请使用 IE7.js（如 Yijiang 建议的那样）或开始向所有文本输入添加类。 p>
参考：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 中而不断增长。
注意：:not pseudo-class 仅支持从 IE9 开始。
【讨论】：
-
+1 引用实际标准而不是一些教程网站
-
谢谢。我注意到人们引用了谷歌上弹出的第一件事......或 w3schools。
-
是的，这有点烦人
-
在 IE6 中能用吗？对于跨浏览器解决方案，我倾向于添加类（.input-text、.input-submit 等），这对于 html 开发来说很糟糕，但它使 css 和 javascript 更好一点。
-
@MubasharAhmad 我已经更新了我的答案，如您所见，只有当您的目标浏览器高于 IE9 时，才有一种解决方法。
你可以在这里使用属性选择器：
input[type="text"] {
font-family: Arial, sans-serif;
}
IE7 及更高版本支持此功能。如果您需要支持 IE6，可以使用IE7.js 添加对此的支持。
请参阅：http://reference.sitepoint.com/css/attributeselector 了解更多信息
【讨论】：
-
注意，正确的通用字体系列是
sans-serif，而不是san-serif。
我通常在我的主样式表中使用选择器，然后制作一个特定于 ie6 的 .js (jquery) 文件，为所有输入类型添加一个类。示例：
$(document).ready(function(){
$("input[type='text']").addClass('text');
)};
然后使用类在 ie6 特定样式表中复制我的样式。这样实际的标记会更清晰一些。
【讨论】：
-
那很慢
您可以使用: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;
}
【讨论】：
我在表格行字段中有输入类型文本字段。我用代码定位它
.admin_table input[type=text]:focus
{
background-color: #FEE5AC;
}
【讨论】：
使用属性选择器，我们在 CSS 中定位输入类型文本
input[type=text] {
background:gold;
font-size:15px;
}
【讨论】：
属性选择器通常用于输入。这是属性选择器列表：
[标题] 所有具有 title 属性的元素都被选中。
[标题=香蕉] 具有 title 属性的 'banana' 值的所有元素。
[标题~=香蕉] 在 title 属性的值中包含“banana”的所有元素。
[标题|=香蕉] 所有title属性值以'banana'开头的元素。
[标题^=香蕉] 所有title属性值以'banana'开头的元素。
[标题$=香蕉] 所有title属性值以'banana'结尾的元素。
[标题*=香蕉] title 属性值包含子字符串“banana”的所有元素。
【讨论】：
输入[类型=文本]
这将选择网页中的所有输入类型文本。
【讨论】：