将输入复选框设为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"; }
但什么都没发生..
我不知道这是否可行?
解决方法
您可以通过以下几种方法实现这一目标:
方法1
>在< label>内tag,two< tags>表示您需要放置的图标(或在外部,每个使用场景)
>当选中或取消选中输入[type =’checkBox’]时,切换这两个< tags>
>完成.
方法2
>对上述方法更简洁的方法是使用bootstraps图标中的css,并将它们放在:< label>之前(或者:取决于你的观点之后):标签
>然后切换内容道具. :在检查或取消选中输入[type =’checkBox’]时,在课前,您想要的图标
>完成.
查看demo here,还有一些关于此事的文档:
> Add boostrap icon to input boxes
> Boostrap checkbox documentation