Custom radio button in bootstrap3 using image

Question

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.

Possible duplicate of [Pure CSS Checkbox Image replacement](http://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement) — Adam Buchanan Smith, Jun 01 '16 at 17:03
@AdamBuchananSmith Thanks but I already tried this with no success — Dimitrios Vythoulkas, Jun 01 '16 at 17:19
it will work if you ut your label next to your input, not around it — Adam Buchanan Smith, Jun 01 '16 at 17:28
@AdamBuchananSmith I don't want to do that. My html is like that for a certain reason. I also state in the question I don;t want to change my html. — Dimitrios Vythoulkas, Jun 01 '16 at 17:37
Maybe this is the adjustment I'm missing here and instead of trying to help me you call me lazy. Being lazy is marking a question as duplicate instead of helping. — Dimitrios Vythoulkas, Jun 01 '16 at 17:41

score 1 · Accepted Answer · answered Jun 01 '16 at 17:29

1

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: https://jsfiddle.net/wietsedevries/gsz1bud4/3/

answered Jun 01 '16 at 17:29

Wietse de Vries

673
7
17

User wants check boxes not radio buttons, please fix, user does not want to make any modifications to html and certainly does not want to have to do it himself. – Adam Buchanan Smith Jun 01 '16 at 17:45

Custom radio button in bootstrap3 using image

1 Answers1