是否可以将输入值属性用作 CSS 选择器？

Question

是否可以使用 CSS 选择器来定位具有特定值的输入？

示例：如何根据value="United States" 定位下面的输入

<input type="text" value="United States" />

Answer 1

动态值（哦不！D;）

正如 npup 在他的回答中解释的那样，一个简单的 css 规则将只针对属性 value，这意味着这并不涵盖 html 节点的实际值。

JAVASCRIPT 救援！

• 丑陋的解决方法：http://jsfiddle.net/QmvHL/

---

原答案

是的，很有可能，使用 css 属性选择器，您可以以这种方式通过输入值引用输入：

input[value="United States"] { color: #F90; }​

• jsFiddle example

来自参考

• [att] 当元素设置“att”属性时匹配，无论 属性的值。

• [att=val] 匹配元素的“att”时 属性值正好是“val”。

• [att~=val] 表示一个元素 att 属性的值是以空格分隔的列表 单词，其中之一正是“val”。如果 "val" 包含空格， 它永远不会代表任何东西（因为这些词是由 空格）。如果 "val" 是空字符串，它永远不会代表 任何东西。

• [att|=val] 表示带有 att 的元素 属性，它的值要么正好是“val”，要么以 “val”紧跟“-”（U+002D）。这主要是为了 允许语言子代码匹配（例如， HTML 中的元素），如 BCP 47 ([BCP47]) 或其后续版本中所述。 对于 lang（或 xml:lang）语言子码匹配，请参见 :lang 伪类。

• css attribute selectors reference

Answer 2

如果您使用的浏览器支持 CSS :valid pseudo-class 和 pattern validation attribute on inputs（包括除 IE9 之外的大多数现代浏览器）， 是可能的。

例如，在输入正确答案时将输入文本从黑色更改为绿色：

input {
  color: black;
}
input:valid {
  color: green;
}

<p>Which country has fifty states?</p>

<input type="text" pattern="^United States$">

Answer 3

是的，但请注意：由于属性选择器（当然）以元素的 attribute 为目标，而不是 DOM 节点的 value 属性 (elem.value)，因此它不会在更新表单字段时更新。

否则（有一些技巧）我认为它可以被用来做一个 CSS-only 替代“占位符”属性/功能。也许这就是OP所追求的？ :)

Answer 4

如前所述，您需要的不仅仅是一个 css 选择器，因为它不访问节点的存储值，因此绝对需要 javascript。这是另一种可能的解决方案：

<style>
input:not([value=""]){
border:2px solid red;
}
</style>

<input type="text" onkeyup="this.setAttribute('value', this.value);"/>

Answer 5

当然，试试：

input[value="United States"]{ color: red; }

jsFiddle example.

Answer 6

你可以使用 Css3 属性选择器或属性值选择器。

/这将使所有值被定义为红色的输入/

input[value]{
color:red;
}

/这将根据输入值进行条件选择/

input[value="United States"]{
color:red;
} 

还有其他属性选择器，比如属性包含值选​​择器，

input[value="United S"]{
color: red;
}

这仍然会将美国的任何输入作为红色文本。

比我们属性值以选择器开头

input[value^='united']{
color: red;
}

任何以 'united' 开头的输入文本都会显示为红色

最后一个是属性值以选择器结尾

input[value$='States']{
color:red;
}

任何以 'States' 结尾的输入值都将具有红色字体颜色

Answer 7

刷新事件的属性是比每十分之一秒扫描一次值更好的方法...

http://jsfiddle.net/yqdcsqzz/3/

inputElement.onchange = function()
{
    this.setAttribute('value', this.value);
};

inputElement.onkeyup = function()
{
    this.setAttribute('value', this.value);
};

Answer 8

在 Chrome 72 (2019-02-09) 中，我发现 :in-range 属性应用于空的 date 输入，出于某种原因！

所以这对我有用：（我添加了 :not([max]):not([min]) 选择器以避免破坏日期输入，确实应用了范围：

input[type=date]:not([max]):not([min]):in-range {
    color: blue;
}

截图：

---

---

这是一个可运行的示例：

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>

Answer 9

按照当前投票最多的答案，我发现使用数据集/数据属性效果很好。

//Javascript

const input1 = document.querySelector("#input1");
input1.value = "0.00";
input1.dataset.value = input1.value;
//dataset.value will set "data-value" on the input1 HTML element
//and will be used by CSS targetting the dataset attribute

document.querySelectorAll("input").forEach((input) => {
  input.addEventListener("input", function() {
    this.dataset.value = this.value;
    console.log(this);
  })
})

/*CSS*/

input[data-value="0.00"] {
  color: red;
}

<!--HTML-->

<div>
  <p>Input1 is programmatically set by JavaScript:</p>
  <label for="input1">Input 1:</label>
  <input id="input1" value="undefined" data-value="undefined">
</div>
<br>
<div>
  <p>Try typing 0.00 inside input2:</p>
  <label for="input2">Input 2:</label>
  <input id="input2" value="undefined" data-value="undefined">
</div>