css美化input单选框按钮

Author：逸云先生
发布时间：April 15, 2020
945 views
No comments
1453 words
Categories： HTML/CSS

**html部分：**

```css
 <div class="xuanxiang">
            <input
                  id="item1"
                  type="radio"
                  name="item"
                  value="item1"
                  checked
            >
            <label for="item1"></label>
            <span>微信支付</span>
      </div>
      <div class="xuanxiang">
            <input
                  id="item2"
                  type="radio"
                  name="item"
                  value="item2"
            >
            <label for="item2"></label>
            <span>支付宝支付</span>
      </div>
      <div class="xuanxiang">
            <input
                  id="item3"
                  type="radio"
                  name="item"
                  value="item3"
            >
            <label for="item3"></label>
            <span>银行卡支付</span>
      </div>
```

**css部分：**

```css
   .xuanxiang {
                  position: relative;
                  line-height: 30px;
            }

.xuanxiang input[type="radio"] {
                  width: 20px;
                  height: 20px;
                  opacity: 0;
            }

.xuanxiang label {
                  position: absolute;
                  left: 5px;
                  top: 3px;
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  border: 1px solid #999;
            }

/*设置选中的input的样式*/
            /* + 是兄弟选择器,获取选中后的label元素*/
            .xuanxiang input:checked+label {
                  background-color: #2D895A;
                  border: 1px solid #2D895A;
            }

.xuanxiang input:checked+label::after {
                  position: absolute;
                  content: "";
                  width: 5px;
                  height: 10px;
                  top: 3px;
                  left: 6px;
                  border: 2px solid #fff;
                  border-top: none;
                  border-left: none;
                  transform: rotate(45deg)
            }
```

Last modification：September 5, 2023