html - 图像而不是单选按钮

Question

我一直在尝试自定义我的单选按钮，为此我想知道如何简单地在单选按钮的选中和未选中事件上添加图像，它应该对所有浏览器都是通用的，我尝试了各种功能，但都给出了结果，但有一定的缺陷我要做的就是将所有 raio 按钮转换为指定的 css 请让我知道如何仅使用 css 方法来完成它（我已经使用 jquery 完成了它，但是它需要一个 eash 单选按钮的标签和始终保持浮动向左）

请帮助谢谢，

Answer 1

为此使用 CSS：

input[type="radio"] {
    display:inline-block;
    height:20px;
    text-indent:-9999px;
    width:20px;
}

input[type="radio"], .notchecked {
    background:url("notchecked.png") 0 0 no-repeat;
}

input[type="radio"]:checked, .checked {
    background:url("checked.png") 0 0 no-repeat;
}

如果您希望旧版浏览器使用它，可以使用 jquery 添加：

$("input[type=radio]").on("change", function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    }
    else {
        $(this).removeClass("checked");
    }
});
$("input[type=radio]:checked").addClass("checked");

和html：

<input type="radio" class="notchecked" value="true" />