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

一旦您知道要使用哪些类，这通过直接的 CSS 就很容易了。您可以使用 来定位悬停单选按钮，使用 来定位.ui-button:hover活动单选按钮.ui-state-active。

所以，给定一些这样的 HTML：

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

你可以这样做：

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

演示：http: //jsfiddle.net/ambiguous/4k3eJ/1/