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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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);
}