一尘不染

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

css

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

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

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

阅读 308

收藏
2020-05-16

共1个答案

一尘不染

动态值(哦,不!D;)

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


原始答案

是的,很有可能,使用css属性选择器,您可以按以下方式通过输入的值来引用输入:

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

从参考

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

  • [att = val]当元素的“ a​​tt”属性值恰好是“ val”时匹配。

  • [att〜= val]表示一个具有att属性的元素,其值是空格分隔的单词列表,其中一个恰好是“val”。如果“val”包含空格,则它将永远不会代表任何内容(因为单词由空格分隔)。如果“val”是空字符串,则也将永远不代表任何内容。

  • [att | = val]表示一个具有att属性的元素,其值要么完全是“ val”,要么以“ val”开头,紧随其后的是“-”(U +
    002D)。这主要是为了允许BCP47([BCP47])或其后续版本中所述的语言子代码匹配(例如,HTML中a元素上的hreflang属性)。有关lang(或xml:lang)语言子代码匹配的信息,请参见:lang伪类。

2020-05-16