You can accomplish this with CSS, but website functionality really shouldn’t be accomplished with CSS, it should be accomplished with JavaScript.
You can try this JavaScript.
window.onload = function() {
document.querySelectorAll('ul.list li input').forEach(item => {
item.addEventListener('click', event => {
var label = item.parentNode;
if (item.checked) {
label.style.fontWeight = "bold";
} else {
label.style.fontWeight = "normal"
}
})
})
}
I have seen your comments on the answer given by @willpakpoy that you have satisfied with his answer but want to change the text to bold for more inputs at once. So I have modified his answer so that it should work for any number of inputs elements. check the snippet.
window.onload = function() {
var checkBox = document.querySelectorAll("input");
var label = document.querySelectorAll(".selectit");
var label = [...label]
label.forEach((el) => {
el.addEventListener("click", () => {
if(el.firstElementChild.nodeName === "INPUT"){
if (el.firstElementChild.checked === true) {
el.style.fontWeight = "bold"
} else {
el.style.fontWeight = "normal";
}
}
})
});
} <ul class="list">
<li>
<label class="selectit">
<input type="checkbox"/>
"Blah"
</label>
</li>
<li>
<label class="selectit">
<input type="checkbox"/>
"Blah"
</label>
</li>
<li>
<label class="selectit">
<input type="checkbox"/>
"Blah"
</label>
</li>
<li>
<label class="selectit">
<input type="checkbox"/>
"Blah"
</label>
</li>
</ul>Use the :checked pseudo-class:
#checkBox:checked + label {
font-weight: bolder;
}<input id="checkBox" type="checkbox" />
<label for="checkBox">Blah</label>I’ve got the following checkbox setup
ul.list li label {
font-weight: 300;
} <ul class="list">
<li>
<label class="selectit">
<input type="checkbox"/>
"Blah"
</label>
</li>
</ul>I’m trying to turn the label bold when the checkbox is checked.
But my label text doesn’t have any html tag around it so the usual solution :checked + span or :checked + label doesn’t work in this case.
How could I make the label bold in this case? Is it possible with CSS only?
The only way to do this:
check the duplicate for a CSS only solution
Thanks @TemaniAfif, I think the focus-within solution will work. But how’s the browser compatibility though? I actually think the JS answer may be better in this case.
if you don’t care about IE, the support is pretty good:
Hey thanks, I think I’m nearly there. It works, but it only works for the first checkbox out of the 12 in total. Is there anything to change to make it work for all checkboxes in the list?
I would assume they all share the same class?
I changed the checkbox line from “var checkBox = document.querySelectorAll(“input”)[0];” to “var checkBox = document.querySelectorAll(“ul.list li input”)[0];” would it change anything?
No, it won’t change anything. I updated the JSFiddle.
But in the question he asked if it was possible without breaking the structure.
exactly, my setup is other way around. I’ve got input inside label, so this won’t work.
Ultimately the solution is the same, and the label tag is best used with for attribute. The label text appears next, same as his code. I find this as a clean solution, yes many more solutions are available.
Ok, see here, this is the correct structure again, see if you can make it working