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

Question

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

Answer 1

It is possible, if you're using a browser which supports the CSS :valid pseudo-class and the pattern validation attribute on inputs -- which includes most modern browsers except IE9.

For instance, to change the text of an input from black to green when the correct answer is entered:

input {
  color: black;
}
input:valid {
  color: green;
}

Which country has fifty states?