是否可以将输入值属性用作 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10645552/
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
Is it possible to use an input value attribute as a CSS selector?
提问by blacktie24
Is it possible to use a CSS selector to target an input that has a specific value?
是否可以使用 CSS 选择器来定位具有特定值的输入？
Example: How can I target the input below based on the value="United States"
示例：如何根据以下内容定位输入 value="United States"
<input type="text" value="United States" />
回答by Michael Zaporozhets
Dynamic Values (oh no! D;)
动态值（哦不！D;）
As npup explains in his answer, a simple css rule will only target the attribute valuewhich means that this doesn't cover the actual value of the html node.
正如 npup 在他的回答中解释的那样，一个简单的 css 规则只会针对属性value，这意味着这不包括 html 节点的实际值。
JAVASCRIPT TO THE RESCUE!
JAVASCRIPT 来拯救你！
- Ugly workaround: http://jsfiddle.net/QmvHL/
- 丑陋的解决方法：http: //jsfiddle.net/QmvHL/
Original Answer
原答案
Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:
是的，这是很有可能的，使用 css 属性选择器，您可以通过它们的值以这种方式引用输入：
input[value="United States"] { color: #F90; }?
• jsFiddle example
• jsFiddle 示例
from the reference
[att] Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val] Match when the element's "att" attribute value is exactly "val".
[att~=val] Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.
[att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.
从参考
[att] 当元素设置“att”属性时匹配，无论该属性的值如何。
[att=val] 当元素的“att”属性值正好是“val”时匹配。
[att~=val] 表示具有att 属性的元素，其值为以空格分隔的单词列表，其中一个正好是“val”。如果“val”包含空格，它将永远不会代表任何内容（因为单词由空格分隔）。如果“val”是空字符串，它也永远不会代表任何东西。
[att|=val] 表示一个具有 att 属性的元素，它的值要么正好是“val”，要么以“val”开头，后面紧跟“-”（U+002D）。这主要是为了允许语言子代码匹配（例如，HTML 中 a 元素上的 hreflang 属性），如 BCP 47（[BCP47]）或其后续版本中所述。对于 lang（或 xml:lang）语言子代码匹配，请参见 :lang 伪类。
回答by Blazemonger
It ispossible, if you're using a browser which supports the CSS :validpseudo-classand the patternvalidation attribute on inputs-- which includes most modern browsers except IE9.
如果您使用的浏览器支持 CSS伪类和输入的验证属性，那么这是可能的——其中包括除 IE9 之外的大多数现代浏览器。:validpattern
For instance, to change the text of an input from black to green when the correct answer is entered:
例如，要在输入正确答案时将输入文本从黑色更改为绿色：
input {
color: black;
}
input:valid {
color: green;
}<p>Which country has fifty states?</p>
<input type="text" pattern="^United States$">回答by npup
Yes, but note: since the attribute selector (of course) targets the element's attribute, not the DOM node's value property(elem.value), it will not update while the form field is being updated.
是的，但请注意：由于属性选择器（当然）针对元素的attribute，而不是 DOM 节点的value 属性(elem.value)，因此在更新表单字段时它不会更新。
Otherwise (with some trickery) I think it could have been used to make a CSS-only substitute for the "placeholder" attribute/functionality. Maybe that's what the OP was after? :)
否则（有一些技巧）我认为它可以被用来为“占位符”属性/功能制作一个仅限 CSS 的替代品。也许这就是OP所追求的？:)
回答by kylpage
As mentioned before, you need more than a css selector because it doesn't access the stored value of the node, so javascript is definitely needed. Heres another possible solution:
如前所述，您需要的不仅仅是一个 css 选择器，因为它不访问节点的存储值，因此肯定需要 javascript。这是另一种可能的解决方案：
<style>
input:not([value=""]){
border:2px solid red;
}
</style>
<input type="text" onkeyup="this.setAttribute('value', this.value);"/>
回答by j08691
回答by at0
Refreshing attribute on events is a better approach than scanning value every tenth of a second...
刷新事件的属性是比每十分之一秒扫描一次值更好的方法......
http://jsfiddle.net/yqdcsqzz/3/
http://jsfiddle.net/yqdcsqzz/3/
inputElement.onchange = function()
{
this.setAttribute('value', this.value);
};
inputElement.onkeyup = function()
{
this.setAttribute('value', this.value);
};
回答by maxspan
You can use Css3 attribute selector or attribute value selector.
您可以使用 Css3 属性选择器或属性值选择器。
/This will make all input whose value is defined to red/
/这将使所有其值定义为红色的输入/
input[value]{
color:red;
}
/This will make conditional selection depending on input value/
/这将根据输入值进行条件选择/
input[value="United States"]{
color:red;
}
There are other attribute selector like attribute contains value selector,
还有其他属性选择器，如属性包含值选择器，
input[value="United S"]{
color: red;
}
This will still make any input with United state as red text.
这仍然会将 United state 的任何输入设为红色文本。
Than we attribute value starts with selector
比我们属性值以选择器开头
input[value^='united']{
color: red;
}
Any input text starts with 'united' will have font color red
任何以“united”开头的输入文本的字体颜色为红色
And the last one is attribute value ends with selector
最后一个是属性值以选择器结尾
input[value$='States']{
color:red;
}
Any input value ends with 'States' will have font color red
任何以“States”结尾的输入值的字体颜色为红色
回答by Dai
In Chrome 72 (2019-02-09) I've discovered that the :in-rangeattribute is applied to empty dateinputs, for some reason!
在 Chrome 72 (2019-02-09) 中，我发现由于某种原因，该:in-range属性应用于空date输入！
So this works for me: (I added the :not([max]):not([min])selectors to avoid breaking date inputs that dohave a range applied to them:
因此，这对我的作品：（我加的:not([max]):not([min])选择，以避免破坏该日期输入你有一系列适用于他们：
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
Screenshot:
截屏：
Here's a runnable sample:
这是一个可运行的示例：
window.addEventListener( 'DOMContentLoaded', onLoad );
function onLoad() {
document.getElementById( 'date4' ).value = "2019-02-09";
document.getElementById( 'date5' ).value = null;
}label {
display: block;
margin: 1em;
}
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}<label>
<input type="date" id="date1" />
Without HTML value=""
</label>
<label>
<input type="date" id="date2" value="2019-02-09" />
With HTML value=""
</label>
<label>
<input type="date" id="date3" />
Without HTML value="" but modified by user
</label>
<label>
<input type="date" id="date4" />
Without HTML value="" but set by script
</label>
<label>
<input type="date" id="date5" value="2019-02-09" />
With HTML value="" but cleared by script
</label>