Geek asks and answers

Replace html checkbox with X

I am trying to replace a check box on a form with red X. In principle, I want the form functionality to remain the same, but I do not want the check box to appear on the display, and click the red x. I am not sure how to replace the checkbox icon.

+3
source share
1 answer

You cannot replace it, because it is a browser-specific implementation, and you will notice that it looks different in different browsers. However, with little effort you can write your own. A minimalist example is to create the following html structure ...

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

Hide checkbox and stylize spanto see how you want ...

.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;
}

, , . , - , , - , . 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, .

+4

More articles:


All Articles