mosmic mosmic - 2 years ago 143
HTML Question

Custom radio button in bootstrap3 using image

I am trying to customise a radio button using two different images. One if not checked and one checked. The html is

<div class="form-group">
<div class="radio">
<input type="radio" name="options" value="1"/>1

I'm trying o use the following css with no result.

.radio input[type=radio]:not(old){
width : 28px;
margin : 0;
padding : 0;
opacity : 0;

.radio input[type=radio]:not(old) {
display : inline-block;
background : url("../../images/empty-checks.png") no-repeat 0 0;

.radio input[type=radio]:not(old):checked{
background-position : 0 -48px;
background : url("../../images/checks.png") no-repeat 0 0;

I would prefer a solution in which I will not have to modify my html.

Answer Source

You have to disable the default markup of the radio input:

input[type=radio] {
  height: 28px;
  width: 28px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;

You also might want to use 1 image, as a sprite, instead of 2.

Check out this fiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download