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.

Answer 1

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>