如何创建复选框看起来像font-awesome glyphicon [英] How to create checkbox looks like font-awesome glyphicon

问题描述

我想创建一个类似复选框的字体真棒 glyph-icon ，这意味着我需要创建一个复选框，它需要伪装成font-awesome图标。

我不需要为当前的复选框设置标签，只需打开和关闭字体超棒的图标即可。
检查状态，图标颜色一。取消勾选状态图标为二色。

检查状态：

取消勾选状态：

我该怎么办？！

解决方案

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

  #checkbox {
 background：＃2f8cab; 
 display：inline-block; 
填充：15px 18px; 
 border-radius：2px; 
职位：亲属; 
光标：指针; 
} 
 
＃复选框元素{
 display：block; 
仓位：绝对; 
剩下：0; 
 top：0; 
宽度：100％; 
身高：100％; 
 z-index：99999; 
不透明度：0; 
} 
 
＃checkbox>输入[type ='checkbox'] + i {
 color：rgba（255,255,255,0.2）; //颜色1 
} 
 
＃checkbox>输入[type ='checkbox']：选中+ i {
颜色：#fff; //颜色2 
} 
  

这是标记，

 < span id =checkbox> 
< input id =checkbox-elementtype =checkbox/> 
< i class =glyphicon glyphicon-check>< / i> 
< / span> 
  

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

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

谢谢！

I want to create a font-awesome glyph-icon which act like checkbox, this means that I need to create a checkbox, which need to disguise as font-awesome icon.

I don't need to have a label for current checkbox,just font-awesome icon which turn on and off. check state, icon is on color one. uncheck state icon is on color two.

check state: uncheck state:

How can I do it?!

解决方案

You can do achieve this even without 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
}

And here's the markup,

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

Have a look at this demo, http://jsbin.com/dusokagise/edit?html,css,output

For Inspiration: https://lokesh-coder.github.io/pretty-checkbox/

Thanks!

这篇关于如何创建复选框看起来像font-awesome glyphicon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！