Boxes Changes When a Character is clicked
How can I make the boxes change colour when a character is entererd? (e.g. When "/" is clicked, the box turns green?)
14 Replies
set an event listener on the input fields, either on the input event or change event, and apply a class based on the value of the input field
wait, can you give more context on how you want it to work?
is doable with only css
yeah, but is that how it is supposed to work?
also, instead of
valid, you should consider using user-valid as wellyea okay
and instead of
:not(:placeholder-shown) you can use :user-invalid or :invalid toodidn't think of that, true. but yea, it depends on what OP wants. it can be done with css, but maybe JS is easier when other things are needed aswell
yeah, which is why i asked more context
that also assumes that blank, | and / are the only valid values, once you hit a fourth, CSS isn't going to work anymore
or rather, it's not going to work if there's more than white, orange, and green
yup, which is why we need more context
btw, was just checking the :user-valid. it doesnt update immediately on input, only on change (blur)
yeah, but the
:invalid does
the :user-invalid differs from the :invalid in the sense that the user has to interact first
for example, imagine a terms and conditions checkboxyea, i see the usecase
with
:invalid, it will show the invalid state as soon as you load the page
with :user-invalid, it waits until the user tries to submit or unchecks it
keep im mind that :user-valid and :user-invalid has some spotty support