Question

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

示例：如何根据value="United States"

定位下面的输入

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

Answer 1

动态值（哦不！D;）

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

JAVASCRIPT TO RESCUE！

丑陋的解决方法：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）。这主要是为了   允许语言子代码匹配（例如，hreflang属性）   如BCP 47（[BCP47]）或其后继者中所述的HTML中的元素。   对于lang（或xml：lang）语言子码匹配，请参阅：lang   伪类。

css attribute selectors reference

Answer 2

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

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

＆＃13;

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

＆＃13;

<p>Which country has fifty states?</p>

<input type="text" pattern="^United States$">

＆＃13;

Answer 3

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

否则（带有一些技巧）我认为它可以用来制作“仅占用”属性/功能的CSS替代品。也许那是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

事件刷新属性比每十分之一秒扫描一次更好...

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

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

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

Answer 7

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

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

input[value]{
color:red;
}

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

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

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

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

这仍将使用United state作为红色文本的任何输入。

我们的属性值以选择器

开头

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

任何输入文字都以＆＃39; united＆＃39;开头。字体颜色为红色

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

结束

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

任何输入值均以＆＃39;状态＆＃39;结尾。字体颜色为红色

Answer 8

在当前投票最高的答案之后，我发现使用数据集/数据属性效果很好。

//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>

Answer 9

在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>

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

9 个答案:

动态值（哦不！D;）

原始答案

• jsFiddle example