Replace the 'Tick' mark of a HTML check box with an image or any other symbol [duplicate]

Question

How can I have a different graphic (image or another symbol) rather than the default Tick mark in the HTML check box.

I read many SO questions but could not do that. As I saw this question to change the color of the tick mark and this. All are old questions. But it's too complex.

Is there any simple way to do this. I hope there is a simple and better way now ?

Answer 1

Actually, theres an easy way to do this using CSS and pseudo-elements. I am using content to add a checkmark in Unicode, but you could use a background just as well, just make sure the positioning is correct.

This implementation requires nothing but having a checkbox itself, so no additional label etc... Your text label will even function correctly from anywhere!

input[type="checkbox"]{
    -webkit-appearance: initial;
    appearance: initial;
    width: 40px;
    height: 40px;
    border: none;
    background: gray;
    position: relative;
}
input[type="checkbox"]:checked {
    background: red;
}
input[type="checkbox"]:checked:after {
    /* Heres your symbol replacement - this is a tick in Unicode. */
    content: "\2713";
    color: #fff;
    /* The following positions my tick in the center, 
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}

<input type="checkbox" />