fill color of radio button on hover event via jquery?

Question

Is it possible to control the display of a radio button via mouse over events?

The goal would be so that it looks checked when the mouse is over and unchecked when the mouse leaves. But it only gets checked when it is clicked just like rating.

Answer 1

Unfortunately, the default browser radio button's background color cannot be styled via CSS, jQuery, or any other means. You might want to look into using custom images instead.

[UPDATE] Use CSS classes, and use jQuery only for toggling of classes.

$('body').on('click', '.fav-icon', function() {
    $(this).toggleClass('active');
});

See jsfiddle: http://jsfiddle.net/samliew/TWduB/5/

Answer 2

The simple answer is:

No you can't change the radio button's color.

instead you can customize it with your needs by using img sprites like this:

More information about it here : custom radios

Answer 3

Shreya, As far as I know the element (the round dot itself) will be hard to modify without any external plugins or libraries (something like This).

This is because the elements are a part of the browser.

It gets easier when you're trying to target a certain browser though.

A similar question has been asked on this platform, you can find it here.

Hope it helps! Good luck!