css自定義單選按鈕的樣式程式碼例項
分享一段程式碼例項,它實現了自定義單選按鈕樣式的功能。
其實這個單選按鈕也是我們用其他元素替代實現的,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } form { padding: 20px; } .wrapper { display: inline-block; vertical-align: middle; width: 30px; height: 30px; border-radius: 100%; background-color: orange; margin-right: 10px; position: relative; } .wrapper input { width: 30px; height: 30px; position: absolute; top: 0; left: 0; z-index: 100; opacity: 0; } .wrapper span { width: 10px; height: 10px; border-radius: 100%; background-color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -5px; margin-top: -5px; opacity: 0; } .wrapper input:checked + span { opacity: 1; } </style> </head> <body> <form> <div class="box"> <div class="wrapper"> <input type="radio" name="sex" id="man" checked="checked" /><span></span> </div> <label for="man">男</label> </div> <div class="box"> <div class="wrapper"> <input type="radio" name="sex" id="weman" /><span></span> </div> <label for="woman">女</label> </div> </form> </body> </html>
相關文章
- 「HTML+CSS」--自定義按鈕樣式【004】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【003】HTMLCSS
- [HTML/CSS]uploadify自定義按鈕樣式HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【001】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【002】HTMLCSS
- css3自定義滾動條樣式程式碼例項CSSS3
- css自定義 range radio select的樣式滑輪,按鈕,選擇框CSS
- antd-mobile 自定義picker按鈕樣式
- 自定義右鍵導航選單程式碼例項
- 數字按鈕分頁CSS樣式程式碼CSS
- js表單提交後提交按鈕不可點選程式碼例項JS
- js獲取選中radio單選按鈕的值程式碼例項JS
- Android 自定義Switch開關按鈕的樣式Android
- 點選按鈕複製連結程式碼例項
- css自定義列表計數程式碼例項CSS
- css3實現的開關按鈕程式碼例項CSSS3
- 防止表單提交按鈕重複點選現象程式碼例項
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- js自定義回撥函式簡單程式碼例項JS函式
- 點選按鈕複製文字框文字程式碼例項
- jquery自定義事件簡單例項程式碼jQuery事件單例
- javascript開關按鈕程式碼例項JavaScript
- css3實現button按鈕美化效果程式碼例項CSSS3
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- 單選按鈕美化效果程式碼
- css樣式初始化程式碼例項CSS
- 點選按鈕設定其背景顏色程式碼例項
- 點選按鈕顯示或者隱藏元素例項程式碼
- js點選按鈕數字加1效果程式碼例項JS
- css 最經典的按鈕樣式CSS
- javascript 點選回車相當於點選按鈕程式碼例項JavaScript
- CSS自定義滑鼠指標形狀程式碼例項CSS指標
- css自定義滑鼠指標圖示程式碼例項CSS指標
- Qt更改按鈕樣式 (以QSpinBox使用左右按鈕樣式為例)QT
- css二級下拉選單程式碼例項CSS
- 美觀開關按鈕程式碼例項
- jQuery操作單選按鈕程式碼示例jQuery
- css簡單水平導航選單程式碼例項CSS