Установить фон для радио-кнопки, когда активный

Question

Это стиль по умолчанию, когда моя кнопка радио активна:

и это то, что я хочу, когда активен:

Любая идея, чтобы сделать это в CSS?

Answer 1

Для работы с пользовательскими стильными элементами формы я могу порекомендовать использовать uniform. Хотя для этого требуется некоторый jquery, после настройки он работает довольно гладко для всех элементов формы.

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

Пользовательские 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); } 

Сценарий будет обернуть некоторые дополнительные HTML вокруг всех целевых полей. Это будет одно и то же требование, если вы хотите использовать только CSS-решение.

DEMO