Styling checkbox sibling element when checkbox is checked-CodePudding

JSX :

<input 
type="checkbox" 
defaultChecked={myfilter.includes("Banana")}
/>
<span 
    onClick={onClickHandler}
    className="banana">Banana
</span>

Without React :

`<input 
    type="checkbox" 
/>
<span 
    className="banana">Banana
</span>`

The goal is to select and style the span element when the input element status is checked. The reason why I need to do this way is that the checkbox element is hidden by default. I tried this, but did not worked :

input[type="checkbox"]:checked   :after{
  background: yellow;
}

CodePudding user response：

chamhe :after to span\

input[type="checkbox"]:checked   span{
 background: yellow;
}