css - 是否可以将输入值属性用作 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 示例

从参考

• [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 伪类。

• css 属性选择器参考

Answer 2

如果您使用的浏览器支持 CSS伪类和输入上的验证属性，这是可能的——其中包括除 IE9 之外的大多数现代浏览器。:validpattern

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

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

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

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

Answer 3

是的，但请注意：由于属性选择器（当然）以元素的属性为目标，而不是 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 示例。

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>