Custom background-images for radio button css

Question

It is my goal to insert a img into the radio button, but a different image for different radio buttons next to each other (the idea is to select the image that fits with the request). It is part of a form (the selected option has to be sent along with the form).

Currently I'm using the normal input="radio" function with the inserted into the html in the tags. However, using this method I cannot force a "selected" state.

So I guess my question is, can I make it so that the label or radio button have different background images using css? Or is there a different option that I fail to see?

Thanks in advance.

There's tons of possibilities for this -- check out codepen or other online resources and you'll find a lot of examples (and I'm sure it's been answered several times on stackoverflow as well). The easiest way I've seen it done is to use the label to house the image and hide the actual radio button, in CSS. If the label comes after the radio button it gets even easier because you can use `input[type="radio"]:checked + label` — Doug, Apr 13 '18 at 15:13
https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons — KaSkuLL, Apr 13 '18 at 15:15
Possible StackOverflow articles: https://stackoverflow.com/questions/25590269/styling-radio-button https://stackoverflow.com/questions/15828612/styling-the-radio-buttons?rq=1 https://stackoverflow.com/questions/24516958/styling-radio-buttons-into-a-square/24517881 — Doug, Apr 13 '18 at 15:15
Possible duplicate of [Style Radio buttons with CSS and use image](https://stackoverflow.com/questions/16189869/style-radio-buttons-with-css-and-use-image) — Doug, Apr 13 '18 at 15:17
@Doug Hi Doug, thanks for your comment. I'm currently using the input[type="radio"]:checked + label function, however that only allows me to set one image for all buttons. However, what I am trying to achieve is to set different backgrounds for individual radio buttons. — Narc, Apr 13 '18 at 15:17
I replied to soon, let me check what else you posted there! :) — Narc, Apr 13 '18 at 15:18
Then bring classes to the party :) `input[type="radio"].img1:checked + label` and so on to specify between the images you want to assign. (where "img1" is a classname unique for that individual or group of radio buttons) — Doug, Apr 13 '18 at 15:18
@Doug Thanks! That'd do it, I've been playing with the classes but couldn't get it to work. Seems I've been placing the class in the wrong position in the css line. — Narc, Apr 13 '18 at 15:21

score 1 · Answer 1 · answered Apr 13 '18 at 15:22

This is a tricky Codepen ( did it in 2 min) might be what you wants (Bootstrap needed)

.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group>.btn:first-child {
    margin-left: 0;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-group-toggle>.btn, .btn-group-toggle>.btn-group>.btn {
    margin-bottom: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}
.btn-secondary {
    color: #fff;
    background-position: center;
    background-size: cover;
      background-image: url(https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg);
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-group-toggle>.btn input[type=checkbox], .btn-group-toggle>.btn input[type=radio], .btn-group-toggle>.btn-group>.btn input[type=checkbox], .btn-group-toggle>.btn-group>.btn input[type=radio] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
input[type="radio" i] {
    -webkit-appearance: radio;
    box-sizing: border-box;
}
user agent stylesheet
input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    margin: 3px 0.5ex;
    padding: initial;
    border: initial;
}
user agent stylesheet
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
}

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option1" autocomplete="off"> Active
</div>

Custom background-images for radio button css

1 Answers1