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

Question

I want to make up the default checkboxes with a nice Bootstrap glyphicon. For example: glyphicon glyphicon-unchecked and when checked: glyphicon glyphicon-check.

I've tried this:

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";
}

But nothing happened..

I don't know if that's posible?

You can only use the content property for the css pseudo elements ::before and ::after. These are not supported for all html elements. — lharby, Jan 28 '15 at 16:24
It's not really working right? The `::before` and `::after` aren't working.. — Dirk Jan, Jan 28 '15 at 17:12
It looks like there are 3 good answers here and they all offer a solution. Given that it is possible to add content from a font/icon resource as long as you map them to the pseudo ::before and ::after elements. And then you can toggle the icon used based on modern css techniques which are outlined below. If I get chance I will make a jsfiddle, but I think the answers below should more than cover your requirements. — lharby, Jan 28 '15 at 18:59

score 7 · Accepted Answer · edited May 23 '17 at 12:25

7

You can achieve that in a couple of methods:

Method 1

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.

Method 2

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:

edited May 23 '17 at 12:25

Community

1
1

answered Jan 28 '15 at 18:34

RGLSV

2,018
1
22
37

Just wondering.. I'm following the bootstrap convention of placing the label before the input in the html. Of course then it does not work as the + in the css selects the next one. Can I use it in a way to keep the label before the html? – gabn88 Feb 20 '23 at 19:32
Yeah I guess so, you could try to possibly add inside the `label` the input and take it from there, maybe theres some combo you can use – RGLSV Feb 27 '23 at 19:59

isherwood · Answer 2 · 2015-01-28T18:59:22.207

If you're able to modify your markup a bit, this should do:

<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

score 1 · Answer 3 · answered Jan 28 '15 at 16:27

if you have the icons, you can style it as such: 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>

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

3 Answers3

Linked

Related