radio單選按鈕美化效果
分享一段程式碼例項,它實現了利用CSS3美化radio單選按鈕效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>螞蟻部落</title> <style type="text/css"> body { font-family: "微軟雅黑"; } /*隱藏自帶的單選框*/ .icheck-radio>input { display: none; } /*為容器設定felx佈局 */ .icheck-radio { display: flex; } .icheck-radio { padding: 5px 0; cursor: pointer; align-items: center; } .icheck-media { position: relative; width: 22px; height: 22px; margin-right: 5px; color: #fff; border: 1px solid #d9d9d9; } .icheck-radio .icheck-media { border-radius: 50%; } .icheck-radio:hover .icheck-media { border-color: #009a61; } .icheck-radio .icheck-media:after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #009A61; transform: scale(0); transition: .3s ease; } .icheck-radio>input:checked+.icheck-media { border-color: #009A61; background: #fff; } .icheck-radio>input:checked+.icheck-media:after { transform: scale(1); } </style> </head> <body> <div class="box"> <label for="radio3" class="icheck-radio"> <input type="radio" id="radio3" name="sex1" checked> <div class="icheck-media"></div> <div class="icheck-inner"> <div class="icheck-title">男</div> </div> </label> <label for="radio4" class="icheck-radio"> <input type="radio" id="radio4" name="sex1"> <div class="icheck-media"></div> <div class="icheck-inner"> <div class="icheck-title">女</div> </div> </label> </div> </body> </html>
相關文章
- CSS3 radio單選按鈕美化效果CSSS3
- 單選按鈕美化效果程式碼
- CSS3 美化radio單選按鈕CSSS3
- js單選按鈕radio選中值JS
- HTML input radio 單選按鈕HTML
- HTML input radio單選按鈕HTML
- html如何設定radio單選按鈕預設選中效果HTML
- radio 單選按鈕 選中多個
- JQuery統一複寫美化專案中所有radio單選按鈕樣式jQuery
- JavaScript獲取選中radio單選按鈕值JavaScript
- 設定radio單選按鈕預設選中
- JavaScript 獲取radio 選中單選按鈕值JavaScript
- JavaScript radio按鈕選中值JavaScript
- 使用jQuery實現的取消radio按鈕選中效果jQuery
- css3將radio單選按鈕模擬為按鈕形狀CSSS3
- 用jquery校驗radio單選按鈕(原創)jQuery
- jQuery獲取被選中radio單選按鈕的值jQuery
- js如何獲取選中radio單選按鈕的值JS
- js如何取得選中的單選按鈕radio的值JS
- jQuery如何獲取選中單選按鈕radio的值jQuery
- jQuery判斷一個radio單選按鈕是否被選中jQuery
- javascript動態改變單選按鈕radio的選中狀態JavaScript
- 單選多選按鈕
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- js獲取選中radio單選按鈕的值程式碼例項JS
- js練習----radio name屬性定義單選按鈕組JS
- CSS3 checkbox核取方塊和radio單選框美化效果CSSS3
- 窗體(文字框,按鈕,單選按鈕,標籤)
- 原生js獲取radio按鈕選中值程式碼JS
- 設定radio單選按鈕一定時間段不可用
- css3實現button按鈕美化效果程式碼例項CSSS3
- JavaScript點選按鈕彈出層效果JavaScript
- Java選擇框和單選按鈕Java
- Bootstrap系列 -- 17. 核取方塊checkbox和單選擇按鈕radioboot
- JavaScript點選按鈕數字加1效果JavaScript
- 點選按鈕實現數字增加效果
- Tkinter (11) 選單按鈕部件 Menubutton
- 配置選單按鈕掃一掃