激活时将背景设置为单选按钮

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