前言
相信大家都知道在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。要覆寫這兩個按鈕默認(rèn)樣式比較困難。在CSS3中，我們可以通過狀態(tài)選擇器“:checked”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。利用CSS3我們可以打造非常具有個性化的用戶表單，本文中實(shí)現(xiàn)的效果非常不錯，感興趣的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)。
效果圖如下
實(shí)例代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>復(fù)選單選樣式</title> <link rel="stylesheet" href="style.css"></head><style> form { border: 1px solid #ccc; padding: 20px; width: 300px; } .wrapper { margin-bottom: 10px; } /*復(fù)選框*/ .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的上一層，不加點(diǎn)擊區(qū)域會出現(xiàn)不靈敏*/ } .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>復(fù)選框：</h2><form action="#"> <div class="wrapper"> <div class="checkbox-box"> <input name="1" type="checkbox" checked id="usename" /> <span>√</span> </div> <label for="usename">體育</label> </div> <div class="wrapper"> <div class="checkbox-box"> <input name="1" type="checkbox" id="usepwd" /> <span>√</span> </div> <label for="usepwd">音樂</label> </div> <div class="wrapper"> <div class="checkbox-box"> <input name="1" type="checkbox" id="checkbox3" /> <span>√</span> </div> <label for="checkbox3">讀書</label> </div> <div class="wrapper"> <div class="checkbox-box"> <input name="1" type="checkbox" id="checkbox4" /> <span>√</span> </div> <label for="checkbox4">運(yùn)動</label> </div></form> <h2>單選框</h2><form action="#"> <div class="wrapper"> <div class="redio-box"> <input type="radio" checked="checked" id="boy" name="1" /><span></span> </div> <label for="boy">男</label> </div> <div class="wrapper"> <div class="redio-box"> <input type="radio" id="girl" name="1" /><span></span> </div> <label for="girl">女</label> </div></form> </body></html>注意：
+ 是css的相鄰選擇符。
關(guān)系選擇符只有四種,是 空格 > + ~ （包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符）
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
