Kevin Powell - Community•12mo ago

Help to how use :invalid in CSS

I need that only change the style of the input, but it's awalys apply the style when use :invalid How can i prevent this doesn't happending? excuse me. My english isn't too good I'm from Colombia

.input__number {
  font-family: 'Poppins Bold' ,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  max-width: 8.6rem;
  padding: 1.2rem 1.6rem;
  border: 0.1rem solid var(--light-grey);
  border-radius: 0.8rem;
  font-size: 1.8rem;
  color: var(--off-black);
  font-weight: 800;
}

.input__number::-webkit-inner-spin-button {
  appearance: none;
}

.input__number:hover {
  border-color: var(--clr-primary);
  cursor: pointer;
}

.input__number:required:invalid {
  border-color: var(--light-red);
}

.input__text::placeholder {
  color: var(--somke-grey);
  font-weight: 700;
}

.input__number {
  font-family: 'Poppins Bold' ,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  max-width: 8.6rem;
  padding: 1.2rem 1.6rem;
  border: 0.1rem solid var(--light-grey);
  border-radius: 0.8rem;
  font-size: 1.8rem;
  color: var(--off-black);
  font-weight: 800;
}

.input__number::-webkit-inner-spin-button {
  appearance: none;
}

.input__number:hover {
  border-color: var(--clr-primary);
  cursor: pointer;
}

.input__number:required:invalid {
  border-color: var(--light-red);
}

.input__text::placeholder {
  color: var(--somke-grey);
  font-weight: 700;
}

4 Replies

Kevin Powell•12mo ago

:user-invalid 🙂 Only problem is browser support isn't fantastic yet. https://caniuse.com/?search=%3Auser-invalid

Js23OP•12mo ago

So.. could i use not the :invalid?

Kevin Powell•12mo ago

:invalid works, but like you can see, that will come in even if the user hasn't interacted with it. There is nothing we can do to change that (without using JavaScript). That's why they added :user-invalid, this only checks the validation after the user has interacted with the element.

Js23OP•12mo ago

Thanks 🥰. You are of the best

Gaming

Programming

Help to how use :invalid in CSS