前言
相信大家都知道在表單元素中，選項按鈕和複選按鈕都具有選中和未選中狀態。要覆寫這兩個按鈕預設樣式比較困難。在CSS3中，我們可以通過狀態選取器“:checked”配合其他標籤實現自訂樣式。利用CSS3我們可以打造非常具有個人化的使用者表單，本文中實現的效果非常不錯，感興趣的朋友們下面來一起學習學習。
如下
執行個體代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>複選單選樣式</title> <link rel="stylesheet" href="style.css"></head><style> form { border: 1px solid #ccc; padding: 20px; width: 300px; } .wrapper { margin-bottom: 10px; } /*複選框*/ .checkbox-box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; } .checkbox-box input { opacity: 0; position: absolute; top:0; left:0; z-index:10; } .checkbox-box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; } .checkbox-box input[type="checkbox"] + span { opacity:0; } .checkbox-box input[type="checkbox"]:checked + span { opacity: 1; } /*單選框*/ .redio-box { display: inline-block; width: 30px; height: 30px; margin-right: 10px; position: relative; background: orange; vertical-align: middle; border-radius: 100%; } .redio-box input { opacity: 0; position: absolute; top:0; left:0; width: 100%; height:100%; z-index:100;/*使input按鈕在span的上一層，不加點擊地區會出現不靈敏*/ } .redio-box span { display: block; width: 10px; height: 10px; border-radius: 100%; position: absolute; background: #fff; top: 50%; left:50%; margin: -5px 0 0 -5px; z-index:1; } .redio-box input[type="radio"] + span { opacity: 0; } .redio-box input[type="radio"]:checked + span { opacity: 1; }</style><body><h2>複選框：</h2><form action="#"> <p class="wrapper"> <p class="checkbox-box"> <input name="1" type="checkbox" checked id="usename" /> <span>√</span> </p> <label for="usename">體育</label> </p> <p class="wrapper"> <p class="checkbox-box"> <input name="1" type="checkbox" id="usepwd" /> <span>√</span> </p> <label for="usepwd">音樂</label> </p> <p class="wrapper"> <p class="checkbox-box"> <input name="1" type="checkbox" id="checkbox3" /> <span>√</span> </p> <label for="checkbox3">讀書</label> </p> <p class="wrapper"> <p class="checkbox-box"> <input name="1" type="checkbox" id="checkbox4" /> <span>√</span> </p> <label for="checkbox4">運動</label> </p></form> <h2>單選框</h2><form action="#"> <p class="wrapper"> <p class="redio-box"> <input type="radio" checked="checked" id="boy" name="1" /><span></span> </p> <label for="boy">男</label> </p> <p class="wrapper"> <p class="redio-box"> <input type="radio" id="girl" name="1" /><span></span> </p> <label for="girl">女</label> </p></form> </body></html>
注意：
+ 是css的相鄰選擇符。
關係選擇符只有四種,是 空格 > + ~ （包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
