Highlighting radio button / checkboxes label

Hi guys

I was wondering if anyone can help. I’d like to be able to highlight checkbox and radio buttons when they are selected. I can do the hover no problem with the code below, but I would really like to have the label permanently highlighted when it is selected / checked. Note - I will use a different colour than the hover. Is this possible

<input type=“checkbox” value=“checklist” id=“checklist” name=“checklist”/>
<label for=“checklist”>Item 1</label>
<label for=“checklist”>Item 2</label>

label:hover, label:active {
background:yellow;
}

Cheers

Del

Like this? Note-not fully supported everywhere.

<!doctype html><html>
<head><style>
input[type="checkbox"]:checked+label {
background:yellow;
}
</style>
</head>
<body>
<input type="checkbox" value="checklist" id="checklist" name="checklist"/>
<label for="checklist">Item 1</label>
<label for="checklist">Item 2</label>


</body>
</html>

That looks great. I will give that a try.

Out of interest - which browsers are not supported?

Thanks for your help

Cheers

Del

You can see a small scale version of the supported browsers here

Great, thanks for your help Ryan - really appreciated.

Cheers

Del

No problem :). You’re welcoem.