css 单选框使用图片

CSS单选框是Web表单常用的一种控件，通常情况下我们可以通过CSS控制单选框的样式，但是，为了让表单更加美观，我们可以使用图片来替代默认的单选框按钮。

input[type="radio"] {
        display: none;
}
input[type="radio"] + label {
        display: inline-block;
        cursor: pointer;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        height: 20px;
        width: 20px;
        padding-left: 25px;
        position: relative;
        font-size: 16px;
        line-height: 20px;
}
input[type="radio"] + label:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
        box-shadow: inset 0 0 0 1px #ddd;
        border-radius: 50%;
}
input[type="radio"]:checked + label:before {
        background-image: url('checked.png');
        background-position: center;
}
    

以上代码实现了单选框使用图片的效果。首先将input[type="radio"]的显示设为none，然后通过label标签实现自定义的样式。我们使用background-image将图片设为单选框按钮，通过:before实现了一个圆形的背景，并且使用box-shadow和border-radius实现了细微的样式调整。最后，我们通过:checked选择器，为选中单选框按钮设置样式。

值得注意的是，在使用background-image时需要指定background-size，根据实际图片大小调整。background-position的位置可以根据图片的具体样式设置。

通过这种方法，我们可以将单选框按钮样式定制成任何想要的样式。如果需要，也可以将input[type="radio"]的样式调整，例如改变它的大小和颜色。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！