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>
Aucun commentaire:
Enregistrer un commentaire