Question

我一直在尝试自定义我的单选按钮，为此我想知道如何在检查和未选中的单选按钮事件上添加图像，它应该是所有浏览器的通用我尝试了各种功能，但都给出结果但是有一些缺陷所有我想要做的就是css转换所有raio按钮指定亲切让我知道它是如何通过仅使用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" />

图像而不是单选按钮

1 个答案: