css – 将输入复选框设为Bootstrap glyphicon是否可行?

前端之家收集整理的这篇文章主要介绍了css – 将输入复选框设为Bootstrap glyphicon是否可行?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
将输入复选框设为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

猜你在找的CSS相关文章