[Solved] How to create checkbox looks like font-awesome glyphicon

by


You can do achieve this even without Javascript.

#checkbox{
  background:#2f8cab;
  display:inline-block;
  padding:15px 18px;
  border-radius:2px;
  position:relative;
  cursor:pointer;
}

#checkbox-element{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:99999;
  opacity:0;
}

#checkbox>input[type="checkbox"]+i{
  color:rgba(255,255,255,0.2); // color 1
}

#checkbox>input[type="checkbox"]:checked+i{
  color:#fff; //color 2
}

And here’s the markup,

<span id="checkbox">
  <input id="checkbox-element" type="checkbox"/>  
  <i class="glyphicon glyphicon-check"></i>
</span>

Have a look at this demo, http://jsbin.com/dusokagise/edit?html,css,output

For Inspiration: https://lokesh-coder.github.io/pretty-checkbox/

Thanks!

solved How to create checkbox looks like font-awesome glyphicon