自己制作單選框樣式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- reset.css檔案內容參考：https://www.cnblogs.com/lanshanxiao/p/12663192.html --> <link rel="stylesheet" href="https://www.cnblogs.com/lanshanxiao/p/reset.css"> <style> .radio-diy .radiocircle { width: 12px; height: 12px; border: 1px solid #999; border-radius: 50%; cursor: pointer; display: inline-block; } .radio-diy input:checked+span { border: 1px solid#008c8c; } .radio-diy input:checked~span { color: #008c8c; } .radio-diy input:checked+span.radiocircle::after { content: ""; display: block; width: 6px; height: 6px; background: #008c8c; border-radius: 50%; cursor: pointer; margin-left: 3px; margin-top: 3px; } input[type="radio"] { display: none; } </style> </head> <body> 請選擇性別： <label > <input type="radio" name="gender" value="https://www.cnblogs.com/lanshanxiao/p/male"> <span ></span> <span>男</span> </label> <label > <input type="radio" name="gender" value="https://www.cnblogs.com/lanshanxiao/p/female"> <span ></span> <span>女</span> </label> </body> </html>radio.css
效果展示：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/47745.html
標籤：Html/Css
上一篇：8.使用背景圖，制作雪碧圖效果