39 replies

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

has

pseudo class to change the color of label when input hover/checked?

KP-C

Kevin Powell - Community•4mo ago•

39 replies

Kamran

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

has

pseudo class to change the color of label when input hover/checked?

label color change when radio input checked

Similar Threads

label color change when radio input checked

Similar Threads

Similar Threads

Similar Threads