css 单选框选中图片

在编写网页时，经常需要通过单选框来实现用户的选择。而单选框的样式却十分有限，只有勾勾和几个字。这时，我们可以通过CSS来自定义单选框的样式，并且在选中时显示自定义的图片，达到更好的用户体验。

/* 自定义单选框的外观 */input[type="radio"] {
      display: none;
 /* 隐藏原有的单选框 */}
label.radio {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #d8d8d8;
      position: relative;
      margin-right: 10px;
}
label.radio:before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #d8d8d8;
      transition: all .2s ease-in-out;
}
input[type="radio"]:checked + label.radio:before {
      background-image: url("选中时的图片路径");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 12px,12px;
      background-color: #D8D8D8;
}
    

以上是自定义单选框样式的CSS代码。通过设置单选框的外观，使其看起来更美观。其中，使用before伪元素实现了勾勾的效果。勾勾默认隐藏，通过选中单选框时添加checked属性，即可显示出选中时的图片。

在HTML中，我们只需要添加相应的标签，在label中嵌套input单选框即可。

以上代码即为单选框的基础结构，可以将其复制多个实现多个单选框。接下来，只需要将选中时的图片路径设置正确即可实现单选框选中时的图片显示效果。

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