出来是彩色的 radio button
.rdo_enabled { vertical-align: middle; margin-top: 5px; font-size: 25px; transform: scale(2); line-height: 60px; background-color: #1890ff; } .rdo_disabled { vertical-align: middle; margin-top: 5px; font-size: 25px; transform: scale(2); line-height: 60px; background-color: rebeccapurple; } .loc input[type="radio"] + label::before { content: " "; display: inline-block; vertical-align: middle; width: 25px; height: 25px; border-radius: 50%; border: .064rem solid #1890ff; margin-right: .213333rem; box-sizing: border-box; } .loc input[type="radio"]:checked + label::before { background-color: #1890ff; background-clip: content-box; padding: .149333rem; box-sizing: border-box; } .loc input[type="radio"]:disabled + label::before { background-color: #d9d9d9; background-clip: content-box; padding: .149333rem; box-sizing: border-box; border: .064rem solid #d9d9d9; } .loc input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); }
html
<span class="loc"> <input type="radio" class="rdo_enabled" disabled="disabled" id="rdoMan" name="gender" /> <label for="rdoMan">男</label> <input type="radio" class="rdo_disabled" id="rdoWomen" name="gender" /> <label for="rdoWomen">女</label> </span>