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

Answer 2

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