How to use an image instead of radio buttons

Question

The following labels act as radio buttons which displays a red border to the selected button.

I would like to have an image appear instead of the red border.

Is this possible?

Code:

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  border: 1px solid red;
}

<div class="button">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">a</label>
</div>
<div class="button">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">b</label>
</div>
<div class="button">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">c</label>
</div>

You can do this with JavaScript, but since label elements bind themselves to a form element and images don't, the solution will be more involved. — Scott Marcus, Mar 05 '16 at 18:55
http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button I hope you find that useful :) — user3184290, Mar 05 '16 at 19:03

dippas · Accepted Answer · 2016-03-05T19:19:05.983

you can use pseudo element ::before and the content:url(), with this the image will stay on top of the label

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("//lorempixel.com/15/15");
  position: absolute;
  left:0
}

<div class="button">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">a</label>
</div>
<div class="button">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">b</label>
</div>
<div class="button">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">c</label>
</div>

If you want your image to shown behind the label same thing from previous snippet but instead add background to ::before and just have content:""

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative;
  color:white
}
input[type="radio"]:checked + label::before {
  content: "";
  position: absolute;
  left: -5px;
  top:2px;
  background: url("//lorempixel.com/15/15") 0 0 no-repeat;
  height:15px;
  width:15px;
  z-index:-1
}

<div class="button">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">a</label>
</div>
<div class="button">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">b</label>
</div>
<div class="button">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">c</label>
</div>

Thx. How do I use my own image instead of a url based image. I know this seems like a silly question but I have all my images in my public folder which I dont know how to access using your answer — Billy, Mar 05 '16 at 19:16
just change the path to something like `content: url("myimagefolder/myimage.jpg")` — dippas, Mar 05 '16 at 19:18

score 1 · Answer 2 · answered Mar 05 '16 at 19:05

You can do it easily using background-image and background-position like following.

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  background-image: url("https://developer.tizen.org/sites/default/files/images/5.3.2.d.png");
  background-position: -169px -31px;
  background-repeat: no-repeat;
  display: block;
  height: 37px;
  width: 37px;
}

input[type="radio"]:checked + label {
  background-position: -44px -31px;
}

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a"></label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b"></label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c"></label>
</div>

score 0 · Answer 3 · answered Mar 05 '16 at 18:55

Sure.

Just use a background if you want an image to appear behind the label:

input[type="radio"]:checked + label {
    background: url(http://placehold.it/100x100);
}

If you want to use an image as a border, you can use the CSS3 border-image property:

input[type="radio"]:checked + label {
    border-image: url(http://placehold.it/100x100) 300 round;
}

How to use an image instead of radio buttons

3 Answers3