是否可以使输入复选框Bootstrap glyphicon？ [英] Is it posible to make an input checkbox a Bootstrap glyphicon?

问题描述

是否可以将一个输入复选框设置为Bootstrap glyphicon？

我想用一个很好的Bootstrap字形组成默认复选框。
例如： glyphicon glyphicon-unchecked 并且选中时： glyphicon glyphicon-check 。

我试过这个：

  input [type ='checkbox'] { 
 position：relative; 
 top：1px; 
 display：inline-block; 
 font-family：'Glyphicons Halflings'; 
 font-style：normal; 
 font-weight：400; 
 line-height：1; 
 -webkit-font-smoothing：antialiased; 
 -moz-osx-font-smoothing：grayscale; 
 content：\e157; 
} 
  

但没有发生任何事情。

我不知道这是否可行？

解决方案

p>

方法1

• c>< label> 标签，两个< tags> ，代表您需要放置的图标输入[type ='checkbox']，然后切换这两个< tags> ] 已选中或未选中


• 完成。

方法2

• 对上述方法使用更清洁的方法，将使用bootstraps图标中的css， < label>上的：before （或：：取决于您的场景） ; 标签


• 然后切换内容道具。当输入[type ='checkbox'] 时，：before

---

>查看 这里的演示 以及通过文档的几个关于此事：

• 将输入框图标添加到输入框


• Boostrap复选框文档

Is it posible to make an input checkbox a Bootstrap glyphicon?

I want to make up the default checkboxes with a nice Bootstrap glyphicon. For example: glyphicon glyphicon-unchecked and when checked: glyphicon glyphicon-check.

I've tried this:

input[type='checkbox'] {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e157";
}

But nothing happened..

I don't know if that's posible?

解决方案

You can achieve that in a couple of methods:

Method 1

• inside a <label> tag, two <tags> that represent the icons that you want need to be placed(or outside, per use scenario)
• then toggle these two <tags>, when the input[type='checkbox'] is checked or unchecked
• done.

Method 2

• a cleaner approach to the above one, would be to use the css from bootstraps icons, and place them in a :before(or :after depending on your scenarion) on the <label> tag
• then toggle the content prop. of the :before class, that the icons that you want have, when the input[type='checkbox'] is checked or unchecked
• done.

---

Check out the demo here and also, a couple of more through documentation on this matter:

• Add boostrap icon to input boxes
• Boostrap checkbox documentation

这篇关于是否可以使输入复选框Bootstrap glyphicon？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！