set image as background for radio button

Question

I have this in my css & html:

    .color-choose input[type="radio"]#red + label span {
    /* background: url('https://content.rolex.com/dam/2021/upright-bba/m124200-0001.png?impolicy=v6-upright') */
    background-color: #000;
     }

<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>

what I am trying to do is have the background of the button to be the image, instead of the color. is this possible?

Does this answer your question? [Use images instead of radio buttons](https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons) — Libra, Nov 15 '21 at 00:40

score 0 · Accepted Answer · answered Nov 15 '21 at 00:56

Use this CSS and remove the data-image property

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

input[type="radio"] + label
{
    background-image:url(http://example.com/radio_image.png);
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}

input[type="radio"]:checked + label
{
    background-image:url(http://example.com/radio_image_checked.png);
}

set image as background for radio button

1 Answers1