将输入复选框设为Bootstrap glyphicon是否可行？

Question

将输入复选框设为Bootstrap glyphicon是否可行？

我想用一个漂亮的Bootstrap glyphicon来组成默认复选框.例如: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";
}

但什么都没发生..

我不知道这是否可行？

Answer 1

您可以通过以下几种方法实现这一目标:

方法1

• 在<label>标签内部,两个<tags>代表您需要放置的图标(或在外部,每个使用场景)
• 然后<tags>在input[type='checkbox']选中或取消选中时切换这两个
• 完成.

方法2

• 对上述方法更简洁的方法是使用bootstraps图标中的css,并将它们放在标签上:before(或:after取决于你的情节)<label>
• 然后切换content道具.在选中或取消选中:before时,您想要的图标input[type='checkbox']
• 完成.

在这里查看演示,还有一些关于此问题的文档:

• 将boostrap图标添加到输入框
• Boostrap复选框文档

Answer 2

如果您能够稍微修改您的标记，则应该这样做：

<label for="myCheckbox" class="glyphy">
    <input type="checkbox" id="myCheckbox" /> 
    <span class="glyphicon glyphicon-unchecked"></span>
    label words
</label>

$('.glyphy').click(function (e) {
    if ($(e.target).is('input')) { // prevent double-event due to bubbling
        $(this).find('.glyphicon').toggleClass('glyphicon-check glyphicon-unchecked');
    }
});

演示