Right here I've a code where I change the label's background when input is checked, but label is right after the input, as displayed in the following example.
const Label = styled.label`
background: red;
display: block;
padding: 1rem;
`;
const Input = styled.input`
&:checked + ${Label} {
background: blue;
}
`;
const App = () => (
<div>
<Input id="input" type="checkbox" />
<Label for="input" />
</div>
);
But how would it be possible to change the label background if the input was inside the label? as displayed in the example below:
const App = () => (
<div>
<Label for="input" />
<Input id="input" type="checkbox" />
</Label>
</div>
);
Aucun commentaire:
Enregistrer un commentaire