[theandrewbailey]

Sounds like the pattern attribute and :invalid selector on <input> will do that.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

[thefifthsetpin]

What if it's valid? There's a reason we have the phrases "in the red" and "in the black."

Another example where reading the input might be nice:

  input[type="cc-number"][value^="4"]+.cc-system-icon {
    background-image: url('visa.png');
  }input[type="cc-number"][value^="5"]+.cc-system-icon {
    background-image: url('master-card.png');
  }