Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
4 replies
Js23

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;
}
image.png
Was this page helpful?