label color change when radio input checked

Hi everyone In this code:

<label
className="relative bg-very-dark-cyan text-white text-2xl py-1.5 px-4 text-center rounded-md hover:bg-cyan/40 hover:text-very-dark-cyan [&:has(input:checked)]:bg-cyan [&:has(input:checked)]:text-very-dark-cyan"
>
  <input className="group absolute w-full h-full top-0 left-0 cursor-pointer opacity-0" />
  {label}
</label>

<label
className="relative bg-very-dark-cyan text-white text-2xl py-1.5 px-4 text-center rounded-md hover:bg-cyan/40 hover:text-very-dark-cyan [&:has(input:checked)]:bg-cyan [&:has(input:checked)]:text-very-dark-cyan"
>
  <input className="group absolute w-full h-full top-0 left-0 cursor-pointer opacity-0" />
  {label}
</label>

with this structure, Is there any other way without using has pseudo class to change the color of label when input hover/checked?

13 Replies

KamranOP•2d ago

The input should be the child of label

curiousmissfox•2d ago

Why not use :has() ? It’s the right tool for the job

KamranOP•2d ago

Yes. Just for curiosity and also the old browsers does not support. I wanna know Is there another way? Currently I used has as you see

Jochem•2d ago

:has has excellent support https://caniuse.com/css-has

ἔρως•2d ago

the alternative is to move the input out of the label then use the for attribute this way, you can use + instead

<input id="input-1" className="group absolute w-full h-full top-0 left-0 cursor-pointer opacity-0" />
<label
    className="relative bg-very-dark-cyan text-white text-2xl py-1.5 px-4 text-center rounded-md hover:bg-cyan/40 hover:text-very-dark-cyan [&:has(input:checked)]:bg-cyan [&:has(input:checked)]:text-very-dark-cyan"
    for="input-1"
>
  {label}
</label>

<input id="input-1" className="group absolute w-full h-full top-0 left-0 cursor-pointer opacity-0" />
<label
    className="relative bg-very-dark-cyan text-white text-2xl py-1.5 px-4 text-center rounded-md hover:bg-cyan/40 hover:text-very-dark-cyan [&:has(input:checked)]:bg-cyan [&:has(input:checked)]:text-very-dark-cyan"
    for="input-1"
>
  {label}
</label>

obviously, fix the tailwind

curiousmissfox•2d ago

Which older browser versions are you needing to support ?

ἔρως•2d ago

if i had to guess, probably old safari versions some people avoid upgrading ios versions

Jochem•2d ago

at some point you just need to accept that progressive enhancements like label colors are only for people that take their own information security seriously enough to upgrade their browsers

KamranOP•2d ago

As I see major browsers older than 2022 are not support and firefox older than 2023 Thanks. Yeah we can do this with + but with my structure can we do it?

ἔρως•2d ago

without :has? no

Jochem•2d ago

do you have analytics for the site you're making? Cause without knowing how many users you'd actually be affecting, it's impossible to make a decision on whether to care about this or not

KamranOP•2d ago

No. I'm just doing this project for practice and I was thinking what if we could not use has in a project and if is there another way or not... As I understood with the same structure It's not possible but If the both label and input be siblings we can do it.

Jochem•2d ago

I wouldn't worry about it at all in this case if I'm honest a color shouldn't ever be vital information, so it's just presentation and that's fine to have as a progressive enhancement quite apart from the fact that :has has well over 90% support

Gaming

Programming

label color change when radio input checked

Did you find this page helpful?