将图像设置为单选按钮的背景

Question

我的 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>

我想要做的是让按钮的背景成为图像，而不是颜色。这可能吗？

Answer 1

使用此 CSS 并删除 data-image 属性

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

html

css

background-image