lundi 9 août 2021

How to style a label when input inside it is checked?

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