是否可以使用输入值属性作为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中元素的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.也许这就是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

您可以使用 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 6

当然,试试:

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

jsFiddle例子.