css 單選框樣式調整
阿新 • • 發佈：2019-01-30
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } .radio { display: inline-block; } label { display: inline-block; padding: 10px 10px; line-height: 20px; position: relative; border: 1px solid #ccc; cursor: pointer; } .radio .option { width: 10px; height: 10px; display: inline-block; border: 1px solid #ccc; border-radius: 50%; position: relative; } .option-span { position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; background: #fff; border-radius: 50%; } .radio input[type="radio"] { display: none; } input[type="radio"]:checked+.option{ border: 1px solid #57a3f3; background: #57a3f3; } </style> </head> <body> <div class="radio"> <label> <input type="radio" name="sex" value="" /> <span class="option"><span class="option-span"></span></span><!--優化後的單選框樣式--> <span>男</span> </label> </div> <div class="radio"> <label> <input type="radio" name="sex" value="" /> <span class="option"><span class="option-span"></span></span><!--優化後的單選框樣式--> <span>女</span> </label> </div> </body> </html>