Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support HTML Form Validation pseudo-classes #356

Closed
AstraLuma opened this issue Aug 11, 2019 · 1 comment
Closed

Support HTML Form Validation pseudo-classes #356

AstraLuma opened this issue Aug 11, 2019 · 1 comment
Labels
enhancement New feature or request

Comments

@AstraLuma
Copy link

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)
@guastallaigor guastallaigor added discussion Discussion of changes or bikeshedding enhancement New feature or request labels Aug 11, 2019
@BcRikko
Copy link
Member

BcRikko commented Aug 14, 2019

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;
}

nesinput


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

@BcRikko BcRikko closed this as completed Aug 14, 2019
@BcRikko BcRikko removed the discussion Discussion of changes or bikeshedding label Aug 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants