CSS3 styled checkbox inspired by http://codepen.io/CreativeJuiz/pen/BiHzp and supporting bootstrap glyphicons.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link rel="stylesheet/less" type="text/css" href="less.less" />
    <script data-require="less.js@*" data-semver="1.3.3" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js"></script>
    
  </head>

  <body>
    <span></span>
    <h3>Quiz</h3>
    <label>1. What is the square root of the 119th prime number?</label>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-xs-4 control-label" for="check1">Dog</label>
        <div class="col-xs-8">
          <input type="checkbox" checked="checked" id="check1" />
          <label for="check1"></label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 control-label" for="check2">Bananas</label>
        <div class="col-xs-8">
          <input type="checkbox" id="check2" />
          <label for="check2"></label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 control-label" for="check3">Minus three</label>
        <div class="col-xs-8">
          <input type="checkbox" checked="checked" disabled="disabled" id="check3" />
          <label for="check3"></label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 control-label" for="check4">Quantam mechatronics</label>
        <div class="col-xs-8">
          <input type="checkbox" disabled="disabled" id="check4" />
          <label for="check4"></label>
        </div>
      </div>
    </form>
  </body>

</html>

/* garbage styles for this demo */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
  padding: 20px;
}

p{
  padding: 5px 5px 0 5px;
}

form{
 margin: 10px;
}

/* check box styles */

input[type="checkbox"]{
  position:absolute;
  left: -9999px;
}

input[type="checkbox"] + label{
  padding-left: 25px;
  cursor:pointer;
  position: relative;
  
   -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="checkbox"] + label:before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px; height: 17px;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
  background: #f8f8f8;
}

input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
  position: absolute;
  top: 4px;
  left: 2px;
  font-size: 14px;
  transition: all .2s;
  
  color: black;
    
  /* replace with .glyphicon mixin */
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  
  /* instead of .glyphicon-ok which uses pseudo elem */
  content: "\e013";
}


input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

input[type="checkbox"]:disabled:not(:checked) + label:before,
input[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
input[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
input[type="checkbox"]:disabled + label {
  color: #aaa;
}
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}