Highlighting radio button / checkboxes label

**deltrotter** · May 10, 2012 00:38

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

**RyanReese** · May 10, 2012 05:18

Like this? Note-not fully supported everywhere.

Code:

<!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>

**deltrotter** · May 10, 2012 05:33

That looks great. I will give that a try.

Out of interest - which browsers are not supported?

Thanks for your help

Cheers

Del

**RyanReese** · May 10, 2012 07:03

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

**deltrotter** · May 10, 2012 07:06

Great, thanks for your help Ryan - really appreciated.

Cheers

Del

**RyanReese** · May 10, 2012 07:13

No problem

. You're welcoem.

User Tag List

Thread: Highlighting radio button / checkboxes label

Thread Tools

Display

Highlighting radio button / checkboxes label

Bookmarks

Bookmarks

Posting Permissions