After moving the label after the checkbox, this CSS selector is now working.
input[type=checkbox]:checked + label {
color: red;
}
<input type="checkbox"><label>Checkbox1</label>
However, I want the checkbox to also be checked when the label is clicked on.
https://i.sstatic.net/AdsHG.png
Below is the updated HTML with the corresponding CSS.
label > input[type=checkbox]:checked {
color: red;
}
<label><input type="checkbox">Checkbox1</label>
What am I doing wrong in this code?
Here is a combined version of the HTML and CSS for reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>"
<title>Selectors Test Ground</title>
<style>
label > input[type=checkbox]:checked {
color: red;
}
</style>
</head>
<body>
<form id="checkBoxForm">
<ul>
<li>
<label><input type="checkbox">Checkbox1</label>
</li>
<li>
<label><input type=checkbox">Checkbox2</label>
<li>
<label><input type="checkbox">Checkbox3</label>
</li>
</ul>
</form>
</body>