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>

```