:user-valid not working for input type date, and neither does :user-invalid

92 Views Asked by At

I'm encountering an issue with the CSS pseudo-class :user-valid not behaving as expected for an input of type date. Similarly, :user-invalid doesn't seem to produce the desired results. However, :valid is working correctly.

Here's a snippet:

input:valid {
  border: 1px solid green;
}

input:user-valid {
  border: 1px solid green; /* Not working as intended for date input */
}

input:user-invalid {
  border: 1px solid red; /* Also not working for date input */
}
<input type="date" name="trip-start" value="2024-02-15" min="2024-02-10" max="2024-02-20" />

The styling for :valid is applied, but neither :user-valid nor :user-invalid seems to have any effect for a date input. I have found no information indicating that date inputs don't work with these rules. I also tested these rules with an email input, and everything works correctly in that case. Any suggestions or insights on how to make :user-valid and :user-invalid work with a date input would be greatly appreciated. Thank you!

0

There are 0 best solutions below