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

问题描述

是否可以将输入复选框设为 Bootstrap 字形?

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

我想用一个漂亮的 Bootstrap glyphicon 来组成默认的复选框.例如:glyphicon glyphicon-unchecked 和选中时:glyphicon glyphicon-check.

I want to make up the default checkboxes with a nice Bootstrap glyphicon. For example: glyphicon glyphicon-unchecked and when checked: 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";
}

但是什么都没发生..

我不知道这是否可行?

推荐答案

您可以通过以下几种方法实现:

You can achieve that in a couple of methods:

方法一

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

• 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.

方法二

• 上述方法的一种更简洁的方法是使用引导程序图标中的 css，并将它们放置在 :before( 或 :after 中，具体取决于您的场景) 在 标签
• 然后切换 content 道具.:before 类，当 input[type='checkbox'] 被选中或取消选中时，你想要的图标
• 完成.

• 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:

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

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