How to Change Label Color with Html and Css Without Js?
I Am Using Checkbox Type Coding and I Would Like to Make It So That for Specific Options, I Am Able to Click It and It Turns Blue, and for Other Options, I Can...
I am using checkbox type coding and I would like to make it so that for specific options, I am able to click it and it turns blue, and for other options, I can click it and it will turn red or green. I have found a way to do this, as shown in the CSS, but I figured I would have to keep writing code for each type of label. So I was wondering if there was a much more efficient way of doing this? Thanks. Here is the code:
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
color: #555;
display: block;
padding: 10px;
margin: 3px;
}
input[type="checkbox"]:checked + label {
color: #ffffff;
font-weight: bold;
background: blue;
}
input[type="checkbox"]:checked + label[for=red1] {
color: #ffffff;
font-weight: bold;
background: red;
}
input[type="checkbox"]:checked + label[for=red2] {
color: #ffffff;
font-weight: bold;
background: red;
}
input[type="checkbox"]:checked + label[for=green1] {
color: #ffffff;
font-weight: bold;
background: green;
}<div><input id="blue1" type="checkbox" /><label for="blue1">1 blue</label></div>
<div><input id="blue2" type="checkbox" /><label for="blue2">2 blue</label></div>
<div><input id="blue3" type="checkbox" /><label for="blue3">3 blue</label></div>
<div><input id="blue4" type="checkbox" /><label for="blue4">4 blue</label></div>
<div><input id="red1" type="checkbox" /><label for="red1">1 red</label></div>
<div><input id="red2" type="checkbox" /><label for="red2">2 red</label></div>
<div><input id="green1" type="checkbox" /><label for="green1">1 green</label></div>3 Answers
You can use the CSS 'starts with' attribute selector (^=) to select all labels with a for attribute that starts with 'red', 'green', etc.
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
color: #555;
display: block;
padding: 10px;
margin: 3px;
}
input[type="checkbox"]:checked + label {
color: #ffffff;
font-weight: bold;
background: blue;
}
input[type="checkbox"]:checked + label[for^=red] {
color: #ffffff;
font-weight: bold;
background: red;
}
input[type="checkbox"]:checked + label[for^=green] {
color: #ffffff;
font-weight: bold;
background: green;
}
label { color: red; }
label span { color: green; }<label> Label <span>Text with other color</span> </label>For one, you don't have to repeat the color and font-weight styles from the first input[type="checkbox"]:checked + label.
An option would be to have classes for the different types of labels, for example:
input[type="checkbox"]:checked + label {
color: #fff;
font-weight: bold;
}
input[type="checkbox"]:checked + .blue {
background: blue;
}
input[type="checkbox"]:checked + .red {
background: red;
}
...
Then your HTML:
<div><input id="blue1" type="checkbox" /><label for="blue1" class="blue">1 blue</label></div>
<div><input id="blue2" type="checkbox" /><label for="blue2" class="blue">2 blue</label></div>
<div><input id="blue3" type="checkbox" /><label for="blue3" class="blue">3 blue</label></div>
<div><input id="blue4" type="checkbox" /><label for="blue4" class="blue">4 blue</label></div>
<div><input id="red1" type="checkbox" /><label for="red1" class="red">1 red</label></div>
<div><input id="red2" type="checkbox" /><label for="red2" class="red">2 red</label></div>
<div><input id="green1" type="checkbox" /><label for="green1" class="green">1 green</label></div>
Further optimization would require some CSS preprocessor, such as SASS.
input[type="checkbox"]:checked {
+ label {
color: #fff;
font-weight: bold;
}
+ .blue {
background: blue;
}
...
}
Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
