'How do I add a box-shadow to my checked label? (React)
I am trying to have the style of a label changed based on whether its child’s radio input is checked or not. Since CSS does not allow a parent to change based on its child, I tried adding conditional styling, which didn't work. Probably because my label is a mapped array.
How do I add a box-shadow to my checked label?
My label and input code:
<label
key={platform.name}
data-name={platform}
/* onClick={onClickLabel} */
/* className={`unchecked ${isChecked ? 'checked' : ''}`} */
>
<input
type="radio"
name="platforms"
value={platform.name}
onChange={(event) => setCheckedPlatform(event.target.value)}
id={platform.name}
/>
<span style={{ fontSize: '1.5rem', marginBottom: '-5px' }}>{platform.icon}</span>
{platform.name}
</label>
))}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
