Turning Checkbox into icon IE9+

Question

I am trying to turn a checkbox into an icon, that when you click, turns red, and then back to gray when you click again. This works perfect on all modern browsers (except IE).

I have been playing around with it for a while and this is how far I got (Look in IE):

http://jsfiddle.net/d67uyfn7/1/

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

For reference, this is how it is supposed to look/function (Look in Chrome):

http://jsfiddle.net/twnc27rj/

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

Any suggestions? Thanks!

Make the checkbox hidden, and place the image where you want the checkbox to be. Then use Javascript to have a click of the image toggle the hidden checkbox. [This may help](http://stackoverflow.com/questions/21628524/jquery-use-image-as-checkbox). — APAD1, Oct 27 '14 at 20:39

score 2 · Accepted Answer · answered Oct 27 '14 at 20:51

2

Try using checkbox input and label combinations: http://jsfiddle.net/n0owcmrt/. JavaScript is not necessary.

HTML:

<input type = "checkbox" id = "togglePen" />
<label for = "togglePen"></label>

CSS:

input[type = "checkbox"] {
    display: none;
}

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: white 
                url('http://i.imgur.com/JOEqZaH.png')
                no-repeat;
    cursor:pointer;
}

input[type = "checkbox"]:checked + label {
    background-image: url('http://i.imgur.com/nJyPSJr.png');
}

answered Oct 27 '14 at 20:51

DRD

5,557
14
14

Amazing, thanks! I was messing with another way using more jQuery and figured it out, but your solution looks cleaner and should be easier to integrate into a solution with multiple checkboxes http://jsfiddle.net/bthtyzoh/1/ – user3277733 Oct 27 '14 at 20:54
You can use `label` and `checkbox input` combination for multiple checkboxes. However, each checkbox must have unique id, which is then set as the value for the label's for attribute. JS/jQuery is necessary to connect the label to its checkbox if for attribute is not used. Here's an example of the latter usage: http://jsfiddle.net/63oe4v24/. jQuery is used to toggle the checkbox, the browser takes care of the rest. – DRD Oct 27 '14 at 21:23
In my book series - Functional CSS - I cover real examples of using HTML and CSS to do things that are commonly done with JS/jQuery. If you are interested, feel free to check the first two volumes out: http://functionalcss.com. – DRD Oct 27 '14 at 21:28

score 0 · Answer 2 · answered Jun 30 '15 at 17:23

You might want to try it without jQuery like this:

#check-icon label input {
    display: none;
}

#check-icon label span {
    display: block;
}

#check-icon:hover span {
    color: #800000;
}

#check-icon:hover span i {
    text-shadow: 0px 0px 5px #800000;
}

#check-icon span i {
    text-shadow: 0px 0px 0px #800000;
}

#check-icon label input {
    position: absolute;
    top: -20px;
}

#check-icon input:checked + span {
    color: #A00000 ;
}

#check-icon input:checked + span i {
    text-shadow: 0px 0px 10px #C00000;
}

#check-icon:hover input:checked + span {
    color: #800000;
}

#check-icon:hover input:checked + span i {
    text-shadow: 0px 0px 10px #800000;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="check-icon">
  <label>
    <input type="checkbox" value="1"></input>
  <span>
    <i class="fa fa-bug"></i>
  </span>
  </label>
</div>

http://jsfiddle.net/murtho/bpvoce49/

Turning Checkbox into icon IE9+

2 Answers2