设置背景单选按钮时主动

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