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放在一起。

用X替换html复选框

1 个答案: