Html 文本输入字段的 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4113965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS selector for text input fields?
提问by Yarin
How can I target input fields of type 'text' using CSS selectors?
如何使用 CSS 选择器定位“文本”类型的输入字段？
回答by Alin Purcaru
input[type=text]
or, to restrict to text inputs inside forms
或者，限制为表单内的文本输入
form input[type=text]
or, to restrict further to a certain form, assuming it has id myForm
或者，进一步限制为某种形式，假设它有 id myForm
#myForm input[type=text]
Notice: This is not supported by IE6, so if you want to develop for IE6 either use IE7.js (as Yi Jiang suggested) or start adding classes to all your text inputs.
注意：IE6 不支持此功能，因此如果您想针对 IE6 进行开发，请使用 IE7.js（如 Yijiang 建议的）或开始向所有文本输入添加类。
Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
参考：http: //www.w3.org/TR/CSS2/selector.html#attribute-selectors
Because it is specifiedthat default attribute values may not always be selectable with attribute selectors, one could try to cover other cases of markup for which text inputs are rendered:
因为指定了默认属性值可能并不总是可以通过属性选择器来选择，所以可以尝试涵盖呈现文本输入的其他标记情况：
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'
Still this leaves the case when the type is defined, but has an invalid value and that still falls back to type="text". To cover that we could use select all inputs that are not one of the other known types
这仍然会在定义类型时留下这种情况，但具有无效值并且仍然回退到 type="text"。为了覆盖这一点，我们可以使用选择不是其他已知类型之一的所有输入
input:not([type=button]):not([type=password]):not([type=submit])...
But this selector would be quite ridiculous and also the list of possible typesis growing with new features being added to HTML.
但是这个选择器会非常荒谬，而且随着新功能被添加到 HTML中，可能的类型列表也在增长。
Notice: the :notpseudo-classis only supported starting with IE9.
注意：:not伪类仅从 IE9 开始支持。
回答by Yi Jiang
You can use the attribute selector here:
您可以在此处使用属性选择器：
input[type="text"] {
font-family: Arial, sans-serif;
}
This is supported in IE7 and above. You can use IE7.jsto add support for this if you need to support IE6.
这在 IE7 及更高版本中受支持。如果您需要支持 IE6，您可以使用IE7.js来添加对此的支持。
See: http://reference.sitepoint.com/css/attributeselectorfor more information
请参阅：http: //reference.sitepoint.com/css/attributeselector了解更多信息
回答by garrettwinder
I usually use selectors in my main stylesheet, then make an ie6 specific .js (jquery) file that adds a class to all of the input types. Example:
我通常在我的主样式表中使用选择器，然后创建一个特定于 ie6 的 .js (jquery) 文件，为所有输入类型添加一个类。例子：
$(document).ready(function(){
$("input[type='text']").addClass('text');
)};
And then just duplicate my styles in the ie6 specific stylesheet using the classes. That way the actual markup is a little bit cleaner.
然后使用这些类在 ie6 特定样式表中复制我的样式。这样实际的标记会更清晰一些。
回答by Aamir Shahzad
You can use :textSelector to select all inputs with type text
您可以使用:textSelector 选择所有类型为 text 的输入
$(document).ready(function () {
$(":text").css({ //or $("input:text")
'background': 'green',
'color':'#fff'
});
});
:textis a jQuery extension and not part of the CSS specification, queries using :text cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="text"]instead. This will work for IE6+.
:text是 jQuery 扩展而不是 CSS 规范的一部分，使用 :text 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请[type="text"]改用。这将适用于IE6+.
$("[type=text]").css({ // or $("input[type=text]")
'background': 'green',
'color':'#fff'
});
CSS
CSS
[type=text] // or input[type=text]
{
background: green;
}
回答by Amit Mhaske
I had input type text field in a table row field. I am targeting it with code
我在表行字段中有输入类型文本字段。我用代码瞄准它
.admin_table input[type=text]:focus
{
background-color: #FEE5AC;
}
回答by Santosh Khalse
With attribute selector we target input type text in CSS
使用属性选择器，我们以 CSS 中的输入类型文本为目标
input[type=text] {
background:gold;
font-size:15px;
}
回答by Navneet Kumar
input[type=text]
输入[类型=文本]
This will select all the input type text in a web-page.
这将选择网页中的所有输入类型文本。
回答by Volker E.
As @Amir posted above, the best way nowadays – cross-browser and leaving behind IE6 – is to use
正如@Amir 在上面发布的那样，如今最好的方法——跨浏览器并抛弃 IE6——是使用
[type=text] {}
Nobody mentioned lower CSS specificity (whyisthatimportant?) so far, [type=text]features0,0,1,0 instead of 0,0,1,1 with input[type=text].
没有人提及的低级CSS特异性（为什么是那个重要？）到目前为止，[type=text]拥有0,0,1,0，而不是0,0,1,1用input[type=text]。
Performance-wise there's no negative impact at all any more.
在性能方面，根本没有任何负面影响。
normalize v4.0.0 just released with lowered selector specificity.
刚刚发布的 normalize v4.0.0降低了选择器的特异性。
回答by Nesha Zoric
The attribute selectors are often used for inputs. This is the list of attribute selectors:
属性选择器通常用于输入。这是属性选择器的列表：
[title] All elements with the title attribute are selected.
[title] 具有title属性的所有元素都被选中。
[title=banana] All elements which have the 'banana' value of the title attribute.
[title=banana] 所有具有 title 属性的 'banana' 值的元素。
[title~=banana] All elements which contain 'banana' in the value of the title attribute.
[title~=banana] title 属性值中包含“banana”的所有元素。
[title|=banana] All elements which value of the title attribute starts with 'banana'.
[title|=banana] title 属性值以'banana' 开头的所有元素。
[title^=banana] All elements which value of the title attribute begins with 'banana'.
[title^=banana] title 属性值以'banana' 开头的所有元素。
[title$=banana] All elements which value of the title attribute ends with 'banana'.
[title$=banana] 所有title 属性值以'banana' 结尾的元素。
[title*=banana] All elements which value of the title attribute contains the substring 'banana'.
[title*=banana] title 属性的值包含子字符串“banana”的所有元素。
Reference: https://kolosek.com/css-selectors/
