mosmic mosmic - 6 months ago 44
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">
<label>
<input type="radio" name="options" value="1"/>1
</label>
</div>
</div>


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

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. http://vbl.su/i/checkbox.png

Check out this fiddle: https://jsfiddle.net/wietsedevries/gsz1bud4/3/