Set background to radio button when active

Question

This is the default style when my radio button active:

and this is what I want when active :

Any idea to do that in CSS?

You have the change the entire element. You can't just change the background color. — Daniel Cheung, Feb 12 '16 at 08:41
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/ ... 2 sec of looking for it on Google. If you spend some time searching, you may find what you need — r4phG, Feb 12 '16 at 08:46
Possible duplicate http://stackoverflow.com/questions/23167637/is-it-possible-to-change-the-color-of-selected-radio-buttons-center-circle — John R, Feb 12 '16 at 08:53

score 0 · Answer 1 · answered Feb 12 '16 at 10:09

To work with custom styled form elements I can recommend using uniform. Although it requires some jquery, once setup it works pretty smooth for all form elements.

$('input[type="radio"]').uniform();

Custom CSS

input[type="radio"] { visibility: hidden; }
.radio span {
    background-image: url(http://path-to-unchecked.png);
    background-repeat: no-repeat;
}
.radio span.checked { background-image: url(http://path-to-checked.png); }

The script will wrap some extra HTML around all targeted fields. This will be the same requirement if you want a CSS only solution.

DEMO

Set background to radio button when active

1 Answers1