如何创建复选框看起来像font-awesome glyphicon

Question

我想创建一个字体很棒的glyph-icon，就像复选框一样，这意味着我需要创建一个复选框，需要伪装成字体真棒图标。

我不需要为当前复选框添加标签，只需打开和关闭font-awesome图标。 检查状态，图标是彩色的。取消选中状态图标是第二种颜色。

检查状态： 取消选中状态：

我该怎么做？！

Answer 1

这是你需要的吗？ ＆＃39; / ＆＃39;关闭＆＃39; 状态？ https://jsfiddle.net/GunWanderer/k11ajrru/4/

HTML：

<ul id="menu">
    <li class="item"><a href="#"><i class="glyphicon glyphicon-check"></i></a></li>
    <li class="item"><a href="#"><i class="glyphicon glyphicon-plus-sign"></i></a></li>
    <li class="item"><a href="#"><i class="glyphicon glyphicon-ok-sign"></i></a></li>   
</ul>

CSS：

<style>
body {
    padding: 20px;
}
#menu {
    padding:0;
    list-style:none;
}
#menu li {
    background-color: #2D5F8B;
    float:left;
    color:#fff;
    width: 100px;
    padding: 10px;
    text-align:center;
}
#menu .item a > .glyphicon { color:#3979B2;}
#menu .item.active a > .glyphicon { color:#fff;}
a,a:hover {text-decoration:none;}
.active {
    background-color: #3979B2!important;
}
</style>

jQuery脚本：

<script>
$(document).ready(function() {
    $("#menu .item a").click(function(){
        $("#menu .item").removeClass("active");
        if ($(this).parent().hasClass("active")) {
            $(this).parent().removeClass("active");
        }
        else {
            $(this).parent().addClass("active");
        }
    });
});
</script>

Answer 2

尝试这一点，通过使用跨度作为图标和复选框周围的包装，您应该能够操纵跨度来检查框，并更改背景颜色。

<span id="checkbox-wrapper">
  <i class="fa fa-flask" aria-hidden="true"></i>
  <input id="flask" type="checkbox" hidden>  
</span>

以下是点击事件在jquery中的外观示例：

$("#checkbox-wrapper").on("click", function() {

    var check = !$("#flask").prop("checked");
    var background = check ? "green" : "red";

    $("#flask").prop("checked", check);
  $(this).css({"background-color" : background});
});

Answer 3

即使没有Javascript，你也可以做到这一点。

#checkbox{
  background:#2f8cab;
  display:inline-block;
  padding:15px 18px;
  border-radius:2px;
  position:relative;
  cursor:pointer;
}

#checkbox-element{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:99999;
  opacity:0;
}

#checkbox>input[type='checkbox']+i{
  color:rgba(255,255,255,0.2); // color 1
}

#checkbox>input[type='checkbox']:checked+i{
  color:#fff; //color 2
}

这是标记，

<span id="checkbox">
  <input id="checkbox-element" type="checkbox"/>  
  <i class="glyphicon glyphicon-check"></i>
</span>

看一下这个演示http://jsbin.com/dusokagise/edit?html,css,output

灵感：https://lokesh-coder.github.io/pretty-checkbox/

谢谢！