css3將radio單選按鈕模擬為按鈕形狀
在很多時候,單選按鈕以按鈕形式展現更加美觀。
如下圖所示:
下面分享一段程式碼例項,它就實現了類似的功能。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin: 0; padding: 0; } body{ background: #f1f1f1; } li{ list-style: none; } .item { width: 25%; height: 44px; line-height: 44px; font-size: 15px; overflow: hidden; float: left; text-align: center; margin-bottom: 10px; } .item .type { height: 41px; line-height: 41px; text-align: center; background-color: #fff; font-size: 15px; display: block; margin: 0 5px; } .radio { position: absolute; top: -9999px; } .item .type span { height: 39px; display: block; border: 1px solid #fff; display: block; position: relative; } .item .radio:checked ~ span { color: #74c742; border-color: #74c742; } </style> </head> <body> <ul> <li class="item"> <label class="type"> <input type="radio" class="radio" name="style" value="4"> <span>螞蟻部落一<i class="check-icon"></i></span> </label> </li> <li class="item"> <label class="type"> <input type="radio" class="radio" name="style" value="4"> <span>螞蟻部落二<i class="check-icon"></i></span> </label> </li> </ul> </body> </html>
相關文章
- CSS3 美化radio單選按鈕CSSS3
- CSS3 radio單選按鈕美化效果CSSS3
- HTML input radio 單選按鈕HTML
- HTML input radio單選按鈕HTML
- radio單選按鈕美化效果
- js單選按鈕radio選中值JS
- radio 單選按鈕 選中多個
- JavaScript radio按鈕選中值JavaScript
- 單選多選按鈕
- javascript動態改變單選按鈕radio的選中狀態JavaScript
- JavaScript獲取選中radio單選按鈕值JavaScript
- 設定radio單選按鈕預設選中
- JavaScript 獲取radio 選中單選按鈕值JavaScript
- 窗體(文字框,按鈕,單選按鈕,標籤)
- 模擬展示動態按鈕
- CSS3模擬實現iphone返回按鈕效果CSSS3iPhone
- 用jquery校驗radio單選按鈕(原創)jQuery
- jQuery獲取被選中radio單選按鈕的值jQuery
- js如何獲取選中radio單選按鈕的值JS
- js如何取得選中的單選按鈕radio的值JS
- jQuery如何獲取選中單選按鈕radio的值jQuery
- html如何設定radio單選按鈕預設選中效果HTML
- jQuery判斷一個radio單選按鈕是否被選中jQuery
- 按鈕上面的按鈕 (轉)
- Java選擇框和單選按鈕Java
- Tkinter (11) 選單按鈕部件 Menubutton
- 配置選單按鈕掃一掃
- 單選按鈕美化效果程式碼
- CSS3動畫按鈕效果CSSS3動畫
- 點選按鈕之後將其設定為不可用狀態
- js練習----radio name屬性定義單選按鈕組JS
- 透過單選按鈕控制編輯框的狀態
- 原生js獲取radio按鈕選中值程式碼JS
- 按鈕
- js獲取選中radio單選按鈕的值程式碼例項JS
- 單選按鈕和核取方塊
- Chrome 22亮相 全新選單按鈕曝光Chrome
- jQuery操作單選按鈕程式碼示例jQuery