如果使用普通 css 选中复选框，则更改 html 标签背景

Question

选中的复选框的标签背景应该如何设置为普通 CSS？我得到了一些可以改变 Ballet Box 跨度背景的东西，但我需要完整的标签才能具有这种没有 javascript.

的颜色

我尝试了标签、输入框选择器的几种组合，并以另一种方式设置了复选框的样式。

参见 https://jsfiddle.net/7haorjcs/ 运行 CSSE.

感谢所有建议。 :-)

<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: "10";
  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: "12";
}
.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>

Answer 1

.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>

Answer 2

如果您不使用 JS，则需要稍微更改一下 html。我会把标签作为复选框的兄弟而不是包装它。然后我会在每个标签+复选框组合周围放一个 div

然后您可以在标签上使用与 span 类似的同级样式。但是，请记住兄弟样式适用于元素之后而不是之前。所以复选框需要出现在标签之前。最后，您可以在 div 上使用 flexbox 样式来包裹复选框和标签，这样您就可以使用 flexbox 顺序使标签首先出现（虽然技术上仍然在复选框之后，因此样式仍然有效）

检查可访问性以及屏幕阅读器在此之后是否仍能正确解释标签可能是值得的

如果使用普通 css 选中复选框，则更改 html 标签背景

change html label background if checkbox is checked with plain css

css

checkbox

input

background-color