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

【问题标题】：Set background to radio button when active活动时将背景设置为单选按钮
【发布时间】：2016-05-23 08:05:33
【问题描述】：

这是我的单选按钮活动时的默认样式：

这就是我在活动时想要的：

有没有办法在 CSS 中做到这一点？

【问题讨论】：

你已经改变了整个元素。你不能只改变背景颜色。
code.stephenmorley.org/html-and-css/… ... 2 秒后在 Google 上查找。如果你花一些时间搜索，你可能会找到你需要的东西
可能重复stackoverflow.com/questions/23167637/…

标签： jquery css radio-button

【解决方案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

【讨论】：