jQuery UI Radio Set - Hover and Checked states without Javascript

Question

For some reason I cannot find a proper way to adjust the HOVER and SELECTED states of the jQuery UI Radiosets.

Not sure why I can't find it, perhaps someone could give me some direction? What I want to change is how the text is GREY on the blue to be white. And when it's SELECTED to have a coloured BORDER instead of grey.

I'm sure it's simple, I just not sure what i'm missing.

Also, I would like to do this without using Javascript if possible and just use CSS adjustments...

Answer 1

This is easy enough through straight CSS once you know which classes to use. You can target the radio buttons for hovering with .ui-button:hover and the active one with .ui-state-active.

So, given some HTML like this:

<div id="gender">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Male</label>
    <input type="radio" id="radio2" name="radio"><label for="radio2">Female</label>
</div>​

You could do this:

#gender .ui-button:hover {
    /* Hover stuff goes here. */
}
#gender .ui-state-active {
    /* Active stuff goes here. */
}

Demo: http://jsfiddle.net/ambiguous/4k3eJ/1/