0

I have a html form with the following checkboxes:

<label><input type='checkbox' name='tag' value='1' /> Tag #1</label>
<label><input type='checkbox' name='tag' value='2' /> Tag #2</label>
<label><input type='checkbox' name='tag' value='3' /> Tag #4</label>

Those label's are styled like this:

label {
    display: inline-block;
    padding: 5px;
    background: #CCC;
    color: #fff;
    border-radius: 999em;
    -moz-border-radius: 999em;
    -webkit-border-radius: 999em;
    }

I found out how to change the checkbox-style itself using :checked - but I didn't manage to change the styling of the parenting label (I wand to change the label's background color from #CCC to something else, e.g. #FC0), when the checkbox is checked. If anyhow possible using only CSS and no JS. Is that possible?

Bene
  • 27
  • 7
  • 1
    Put the label tag _after_ the input and use `input:checked + label`. You need to style the input as well, of course. You could end up with having to put both input and label inside a div tag. – Rickard Elimää Aug 30 '20 at 09:35
  • 1
    Check out this post for more information: https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label – Rickard Elimää Aug 30 '20 at 09:43

0 Answers0