是否可以将输入复选框设为 Bootstrap 字形图标？

Question

我想用漂亮的 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";
}

但是什么也没发生..

不知道可不可以？

Answer 1

如果你有图标，你可以这样设置它的样式：http://jsfiddle.net/swm53ran/164/

/*hide checkbox and radio buttons*/
input[type=checkbox], 
input[type=radio] {
    width: 2em;
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 0; /*This is the part tht actually hides it*/
}

/*normalize the spacing*/
input[type=checkbox] + label,
input[type=radio] + label {
    display: inline-block;
    margin-left: -2em;
    line-height: 1.5em;
}

/*unchecked css*/
input[type=checkbox] + label > span,
input[type=radio] + label > span {
    display: inline-block;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/48px-Face-sad.svg.png');
    width: 50px;
    height: 50px;
}

/*selected checkbox css*/
input[type=checkbox]:checked + label > span > span {
    width: 50px;
    height: 50px;
    display:block;
    background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}

/*selected radio css*/
input[type=radio]:checked + label > span > span {
    width: 50px;
    height: 50px;
    display:block;
    background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}

<div>
    <input id="check1" type="checkbox" name="check1" value="check1" />
    <label for="check1"><span><span></span></span>Checkbox</label>
</div>
<div>
    <input id="radio1" type="radio" name="radio" value="radio1" />
    <label for="radio1"><span><span></span></span>Radio1</label>
</div>
<div>
    <input id="radio2" type="radio" name="radio" value="radio2" />
    <label for="radio2"><span><span></span></span>Radio2</label>
</div>

Answer 2

您可以通过几种方法实现：

方法一

在 <label> 标签内，两个 <tags> 代表您需要放置的图标（或外部，根据使用场景）
然后切换这两个 <tags>，当 input[type='checkbox'] 被选中或未被选中时
完成。

方法二

一种更简洁的方法是使用引导程序图标中的 css，并将它们放在 :before（或 :after 取决于您的场景） <label> 标签
然后切换 content 道具。在 :before class 中，当 input[type='checkbox'] 被选中或未被选中时，您想要的图标有
完成。

查看 demo here 以及关于此问题的更多文档：

Add boostrap icon to input boxes
Boostrap checkbox documentation

Answer 3

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

<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');
    }
});

Demo

是否可以将输入复选框设为 Bootstrap 字形图标？

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

css

checkbox

twitter-bootstrap