CODEWITHSUNDEEP
htmlcss
Pradeep Ramisetti
Pradeep Ramisetti

Reputation: 97

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

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

Upvotes: 6

Views: 38222

Answers (2)

Shivkumar kondi
Shivkumar kondi

Reputation: 6782

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" />

Upvotes: 11

Sravan
Sravan

Reputation: 18657

Try this, I will provide you a fiddle too,

input[type=checkbox].css-checkbox { position: absolute;  overflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0; border:0; } 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; }  .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }
<form>
<input id="demo_box_2" class="css-checkbox" type="checkbox" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
<input id="demo_box_3" class="css-checkbox" type="checkbox" />
<label for="demo_box_3" name="demo_lbl_3" class="css-label">Selected Option</label>
</form>

Try the snippet

check the Fiddle link

Upvotes: 6

Related Questions