Is it possible to use an input value attribute as a CSS selector?

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!


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.

Leave a Comment