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

是否可以使用CSS选择器以具有特定值的输入为目标

示例：如何根据

value=“美国”

动态值（哦，不！D；） 正如npup在他的回答中所解释的，一个简单的css规则将只针对属性

值

，这意味着这不包括html节点的实际值

JAVASCRIPT拯救一切

• 丑陋的解决方法：

---

原始答案 是的，这是非常可能的，使用css属性选择器，您可以通过输入值以这种方式引用输入：

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

来自参考

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

当然可以，试试：

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

---

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

---

否则（通过一些诡计），我认为它可以被用来制作一个仅用于CSS的“占位符”属性/功能的替代品。也许这就是这次行动的目的？：）

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

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

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

输入：非（[value=”“]）{
边框：2倍纯红；
}

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

---

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

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

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

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

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

这仍然会以红色文本的形式输入美国

然后，属性值从选择器开始

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

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

任何以“united”开头的输入文本的字体颜色均为红色

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

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

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

任何以“States”结尾的输入值都将使用红色字体

如果您使用的是支持CSS的浏览器和--包括除IE9以外的大多数现代浏览器，则它是可能的

例如，要在输入正确答案时将输入文本从黑色更改为绿色，请执行以下操作：

输入{
颜色：黑色；
}
输入：有效{
颜色：绿色；
}

哪个国家有五十个州

在Chrome 72（2019-02-09）中，我发现

：In range

属性应用于空的

日期

输入，这是出于某种原因

因此，这对我来说很有用：（我添加了

：not（[max]）：not（[min]）

选择器，以避免中断应用了范围的日期输入：

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

截图：

---

---

以下是一个可运行的示例：

window.addEventListener（'DOMContentLoaded'，onLoad）；
函数onLoad（）{
document.getElementById（'date4'）.value=“2019-02-09”；
document.getElementById（'date5'）。值=null；
}

标签{
显示：块；
边缘：1米；
}
输入[类型=日期]：不（[最大]）：不（[最小]）：在范围内{
颜色：蓝色；
}

没有HTML值=“”
带有HTML值=“”
没有HTML值=“但由用户修改
没有HTML值=“但由脚本设置
HTML值为=“但被脚本清除

根据目前投票最多的答案，我发现使用dataset/data属性效果很好

//Javascript
const input1=document.querySelector（“#input1”）；
输入1.value=“0.00”；
input1.dataset.value=input1.value；
//dataset.value将在input1 HTML元素上设置“数据值”
//并将由针对dataset属性的CSS使用
document.queryselectoral（“输入”）.forEach（（输入）=>{
addEventListener（“输入”，函数（）{
this.dataset.value=this.value；
console.log（this）；
})
})

/*CSS*/
输入[数据值=“0.00”]{
颜色：红色；
}

Input1由JavaScript以编程方式设置：

投入1：


尝试在input2内键入0.00：

投入2：

这正是我所追求的。不过这是有道理的。浏览器只在元素呈现时评估css规则，更改值不会导致输入重新呈现。@SamHasler举了一个例子，说明加载时值会发生变化，样式也会发生变化：我相信问题完全在于npop提出的第一点。@Mikey，这与你无关如果您直接更改输入，请更新。解决方案似乎是在输入值更改时更新属性：@SamHasler查看我的更新答案，顶部有一个全局解决方法：）这是否仅适用于文本？我无法使用type=“number”。@Mikey，问题似乎在于更新值时样式不会更新。这里有一个例子来说明它是如何实现的

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

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