Support HTML Form Validation pseudo-classes

[Jamie Bliss]

Is your feature request related to a problem? Please describe.

Currently, the .is-success and .is-error styles are not triggered by :valid and :invalid

Describe the solution you'd like
.nes-input:valid and .nes-input:invalid should be aliases for .nes-input.is-success and .nes-input.is-error.

Describe alternatives you've considered

• JS library, which is unnecessary (and possibly unwanted) in situations where you're leaning into HTML5 vanilla features
• Copying into my CSS, which is a lot of fairly opaque code (because of SVG embeds)

[B.C.Rikko]

I like HTML5 validation ❤️
So I think this idea is good 👍

But, Input fields always take the state :valid or :invalid.
Therefore, we will not be able to use the default color. 😭
So we can't meet your request. 🙇

<input class="nes-input" type="url">

.nes-input.is-success,
input.nes-input:valid {
  border: solid 4px #76c442;
  outline-color: #76c442;
}
.nes-input.is-success,
input.nes-input:invalid {
  border: solid 4px #ce372b;
  outline-color: #ce372b;
}

---

Copying into my CSS, which is a lot of fairly opaque code (because of SVG embeds)

In the next version, we'll use CSS variables to make it easier to change colors.
#331