I am working on a form that includes checkboxes and radio buttons. My goal is to make the selected options appear bold for better visual emphasis.
Following advice from this Stack Overflow thread, I have been using "label for" in HTML.
In my scenario, some of the radio button options can be disabled based on other form fields. When an option is disabled, I do not want it to appear in bold.
While I know how to achieve this using JavaScript, I am exploring possible ways to implement it through CSS.
Here is a snippet of the code I have put together:
:checked + label {
font-weight: bold;
}<input id="rad1" type="checkbox" name="rad" checked/><label for="rad1">Radio 1</label>
<input id="rad2" type="checkbox" name="rad"/><label for="rad2">Radio 2</label>
<input id="chkdis1" type="radio" name="chkdis" value="chkdis1" checked disabled><label for="chkdis1"> chkdis</label>
<input id="chkdis2" type="radio" name="chkdis" value="chkdis2" disabled><label for="chkdis2"> chkdis</label>After experimenting with CSS, here is the solution I came up with:
:checked + label {
font-weight: bold;
}
:disabled + label {
font-weight: normal;
}<input id="rad1" type="checkbox" name="rad" checked/><label for="rad1">Radio 1</label>
<input id="rad2" type="checkbox" name="rad"/><label for="rad2">Radio 2</label>
<input id="chkdis1" type="radio" name="chkdis" value="chkdis1" checked disabled><label for="chkdis1"> chkdis</label>
<input id="chkdis2" type="radio" name="chkdis" value="chkdis2" disabled><label for="chkdis2"> chkdis</label>One drawback of my current solution is that if I switch the order by putting :disabled + label before :checked + label, the desired functionality no longer works. This leaves room for potential errors if someone were to inadvertently swap these lines in the code.
Do you have any suggestions for a more reliable approach?