Question

我正在尝试将复选框变为图标，当您再次单击时单击，变为红色，然后再变为灰色。这适用于所有现代浏览器（IE除外）。

我已经玩了一段时间了，这就是我得到了多远（在IE浏览器中）：

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

作为参考，这是它的外观/功能（在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" />

有什么建议吗？谢谢！

Answer 1

尝试使用checkbox input和label组合：http://jsfiddle.net/n0owcmrt/。 JavaScript不是必需的。

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');
}

Answer 2

你可能想在没有jQuery的情况下尝试这样：

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

将Checkbox转换为图标IE9 +

2 个答案: