用X替换html复选框

Question

我正在尝试用红色X替换表单上的复选框.基本上,我希望表单功能保持不变但我不希望显示为要检查的框,而是要点击红色x.我不知道如何更换复选框图标.

Answer 1

您不能替换它,因为它是特定于浏览器的实现,您会注意到它在不同的浏览器中看起来不同.但是,只要稍加努力,您就可以自己编写.一个简约的例子是创建以下html结构......

<div>
    <span class="chk" unchecked></span>
    <input type="checkbox" />
</div>

隐藏复选框并设置样式span以查看您想要的方式...

.chk
{
    display:inline-block;
    width:13px;
    height:13px;
    border-radius: 3px;
    padding:2px;
    border:1px #ccc solid;
    cursor:pointer;
}
.chk[checked]{
    background:url(your-checked_image.png);
}
.chk[unchecked]{
    background:url(your_own_image.png);
}
input[type=checkbox]
{
    display:none;
}

然后,您需要与click事件相交以更改背景图像,跟踪已检查状态并切换复选框.请注意,即使隐藏了该复选框,您仍需要该复选框,以防您需要使用表单标记提交某些状态.我用jQuery做了所有这些,这让一切变得非常简单......

$(function(){
    $('.chk').click(function(){
        if($(this).attr('checked') == undefined)
        {
            $(this).attr('checked',"");
            $(this).removeAttr('unchecked');
            $('input[type=checkbox]').prop('checked', true);
        }
        else
        {
            $(this).removeAttr('checked');
            $(this).attr('unchecked',"");
            $('input[type=checkbox]').prop('checked', false);
        }
    });
});

我把一个你可以玩的JS Fiddler放在一起.