Support HTML Form Validation pseudo-classes

[AstraLuma]

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)

[BcRikko]

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. https://github.com/nostalgic-css/NES.css/issues/331