css - After selecting check box Instead of Tick symbol need X in html

Question

After selecting the check box in a form currently I am getting tick symbol as default. but here I need X(cross Mark) . Do I need put a class for that and have to apply any styling for that class.This is the simple form I am trying

 <input type="checkbox"> Selected 1st element
 <input type="checkbox"> selected 2nd element

Answer 1

Better use image or try changing content: "X";

you can properly change unicode of ticks to any other symbol :https://en.wikipedia.org/wiki/X_mark

input[type="checkbox"]{
    -webkit-appearance: initial;
    appearance: initial;
    background: gray;
    width: 40px;
    height: 40px;
    border: none;
    position: relative;
}
input[type="checkbox"]:checked {
    background: red;
}
input[type="checkbox"]:checked:after {
    /* Heres your symbol replacement */
    content: "X";
    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" />