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

Just one suggestion : If you will use material js with angular, you will feel better with this. Refer this just: https://material.angularjs.org/latest/demo/checkbox — Jigar7521, Oct 19 '16 at 06:28
yea I have referred it earlier only . but in that all are tick symbol by default. but i need a different one — Pradeep Ramisetti, Oct 19 '16 at 06:31

score 9 · Answer 1 · edited Mar 29 '19 at 12:04

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

@PradeepRamisetti its working. For changing symbols include font-awesome.css. — Shivkumar kondi, Oct 20 '16 at 06:15

Sravan · Answer 2 · 2016-10-19T07:11:44.273

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

But its working for only one selection. If we are having multiple its not working. what ever we selected in the below its reflecting for first option itself — Pradeep Ramisetti, Oct 19 '16 at 07:06

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

2 Answers2

Linked

Related