是否可以使用输入值属性作为CSS选择器？ [英] Is it possible to use an input value attribute as a CSS selector?

问题描述

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

示例：如何根据 value =United States

 < input type =text =United States/> 
  

解决方案

动态值h2>

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

b

• 丑陋的解决方法： 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 bval紧接着 - （U + 002D）。这主要用于
  以允许语言子代码匹配（例如，HTML中的
  a元素上的hreflang属性），如BCP 47（[BCP47]）或其后续版本中所述。
  对于lang（或xml：lang）语言子代码匹配，请参阅：lang
  伪类。

• css属性选择器引用

Is it possible to use a CSS selector to target an input that has a specific value?

Example: How can I target the input below based on the value="United States"

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

解决方案

Dynamic Values (oh no! D;)

As npup explains in his answer, a simple css rule will only target the attribute value which means that this doesn't cover the actual value of the html node.

JAVASCRIPT TO THE RESCUE!

• Ugly workaround: http://jsfiddle.net/QmvHL/

---

Original Answer

Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:

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

• jsFiddle example

from the reference

• [att] Match when the element sets the "att" attribute, whatever the value of the attribute.

• [att=val] Match when the element's "att" attribute value is exactly "val".

• [att~=val] Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.

• [att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

• css attribute selectors reference

这篇关于是否可以使用输入值属性作为CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！