<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单选按钮美化</title> <style> label{ position:relative; display:inline-block; cursor:pointer; } label>input{ display:none; } label .radio-inner{ position:relative; padding-left:35px; } label .radio-inner:before{ content:‘‘; position:absolute; width:20px; height:20px; top:0; left:0; border:1px solid #d9d9d9; border-radius:50%; } label .radio-inner:after{ content:‘‘; position:absolute; width:10px; height:10px; top:6px; left:6px; background:#fff; border-radius:50%; } label>input:checked+.radio-inner:before{ border-color:#009a61; } label>input:checked+.radio-inner:after{ background:#009a61; } </style></head><body><label for="radio1"> <input type="radio" id="radio1" checked name="radio" /> <div class="radio-inner"> <div class="radio-title">radio1</div> </div></label><label for="radio2"> <input type="radio" id="radio2" name="radio" /> <div class="radio-inner"> <div class="radio-title">radio2</div> </div></label></body></html>
时间： 2024-10-06 15:50:40