如何创建复选框看起来像字体超棒的字形图标

Question

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

我不需要当前复选框的标签，只需要打开和关闭的超棒字体图标。检查状态，图标在颜色一上。取消选中状态图标在颜色二上。

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

我该怎么做？！

Answer 1

这是你需要的吗？ 'on' / 'off' 状态？ 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 作为图标和复选框的包装，您应该能够操纵 span 来选中复选框，并更改背景颜色。

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

谢谢！

如何创建复选框看起来像字体超棒的字形图标

How to create checkbox looks like font-awesome glyphicon

html

javascript

css

font-awesome