change html label background if checkbox is checked with plain css

Question

How should the label's background for a checked checkbox be set in plain CSS? I got something that changes the background of the Ballet Box span, but I need the complete label to have this color without javascript.

I tried several combinations of label, input-box-selectors and styling the checkbox in another way.

See https://jsfiddle.net/7haorjcs/ for running CSSE.

Thanks for all suggestions. :-)

<html>
<head>
  <meta charset="UTF-8">
  <title>CheckboxTest</title>
  <style type="text/css">
body {
  margin: 20px;
  background: #FFFFFF;
  font-family: 'Trebuchet MS', 'Open Sans', sans-serif;
  color: #000000;
}
.cbx {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #ff6633;
  cursor: pointer;
  border: 2px solid;
  border-color: #002080;
  border-radius: 4px;
  padding: 2px 5px;
  display: inline-block;
  font-weight: bold;
  font-size: x-large;
}
.cbx:hover {
  color: #000000;
  background-color: #ffe066;
}
.cbxcm:checked + span { /* the span changes color, but not the complete label */
  background-color: #336600;
}
.cbxcm:checked:hover + span { /* the span changes color, but not the complete label */
  background-color: #ffe066;
}
.cbxcm {
  display: none;
}
.cbxcm + span {
  color: #ffd633;
}
.cbxcm + span:after {
  content: "\2610";
  font-style: bold;
  font-size: x-large;
  margin-left: 10px;
}
.cbxcm:hover + span {
  color: #005500;
}
.cbxcm:checked + span {
  color: #66ff33;
}
.cbxcm:checked + span:after {
  content: "\2612";
}
.cbxcm:checked:hover + span:after {
  color: #555555;
}
  </style>
</head>
<body>
<div class="outer">
  <div class="content" id="content">
  <label class="cbx">Text
    <input class="cbxcm" type="checkbox"><span></span></label>
  <br><br>
  <label class="cbx">Some more Text
    <input class="cbxcm" type="checkbox"><span></span></label>
  <br><br>
  <label class="cbx">Different
    <input class="cbxcm" type="checkbox" checked="checked"><span></span></label>
  </div><br>
  <div class="footer">
    <div id="console"></div>
  </div>
</div>
</body>
</html>

score 0 · Accepted Answer · answered Feb 20 '21 at 10:19

If you are not using JS you need to change your html a bit. I would put the label as a sibling to the checkbox rather than wrapping it. Then i would put a div around each label+ checkbox combo

You can then use sibling styling similar to what you have done with span but on the labels. However, keep in mind that sibling styling works on elements AFTER and not before. So the checkbox will need to come before label. Finally you can use flexbox styling on the div that wraps the checkbox and label so you can use flexbox order to make the label appear first (while still technically being after the checkbox and so styling still works)

It may be worth reviewing accessibility and whether screen readers still interpret the labels correctly after this

score -1 · Answer 2 · answered Feb 20 '21 at 10:18

.label {
  color: white;
  padding: 8px;
  font-family: Arial;
}
.success {background-color: #4CAF50;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */ 
.other {background-color: #e7e7e7; color: black;} /* Gray */ 
</style>
</head>
<body>

<h1>Labels</h1>

<span class="label success">Success</span>
<span class="label info">Info</span>
<span class="label warning">Warning</span>
<span class="label danger">Danger</span>
<span class="label other">Other</span>

Thanks, but this changes background of a label, but has nothing to do with checkboxes. — Newbie1980, Feb 20 '21 at 10:29

change html label background if checkbox is checked with plain css

2 Answers2