css3實現的checkbox核取方塊美化程式碼例項
下面就是一段使用css3實現的核取方塊美化程式碼,IE8和IE8以下瀏覽器不支援。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> /* .checkboxC3 */ .checkboxC3 { width:14px; height:14px; position:relative; } .checkboxC3 label { width:14px; height:14px; cursor:pointer; position:absolute; top:0; left:0; background:#eae9e9; border:1px solid #bfbebe; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .checkboxC3 label:after{ content:''; position: absolute; top: 1px; left: 1px; width: 10px; height: 6px; border: 2px solid #fff; border-top: none; border-right: none; background: transparent; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } .checkboxC3 input[type=checkbox] { margin: 0; visibility: hidden; } .checkboxC3 input[type=checkbox][disabled] + label { border-color: transparent; background: #ECECEC; cursor: not-allowed; } .checkboxC3 input[type=checkbox]:checked + label { border-color: transparent; background: #2196f3; } .checkboxC3 input[type=checkbox]:checked + label:after { opacity: 1; } /* end .checkboxC3 */ </style> </head> <body> <div class="checkboxC3"> <input type="checkbox" id="remeber"> <label for="remeber"></label> </div> </body> </html>
相關文章
- checkbox核取方塊美化程式碼例項
- 模擬美化checkbox核取方塊程式碼例項
- css3美化checkbox核取方塊CSSS3
- css3自定義checkbox核取方塊打勾效果程式碼例項CSSS3
- CSS 美化checkbox核取方塊CSS
- 獲取選中checkbox核取方塊的值程式碼例項
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- checkbox核取方塊全選和取消全選例項程式碼
- 檢測checkbox核取方塊是否被選中的例項程式碼
- CSS3核取方塊打勾美化效果CSSS3
- checkbox 核取方塊全選程式碼
- CSS模擬美化checkbox核取方塊詳解CSS
- CSS3 checkbox核取方塊和radio單選框美化效果CSSS3
- 點選文字框彈出可供選擇的checkbox核取方塊程式碼例項
- jQuery獲取選中核取方塊的值程式碼例項jQuery
- js實現checkbox核取方塊的反選效果JS
- jquery實現checkbox核取方塊全選效果jQuery
- 核取方塊全選和全不選程式碼例項
- jQuery實現的刪除選中核取方塊當前表格行程式碼例項jQuery行程
- HTML input checkbox 核取方塊HTML
- HTML input checkbox核取方塊HTML
- jQuery checkbox核取方塊操作jQuery
- css點選附近文字選中核取方塊程式碼例項CSS
- js獲取checkbox核取方塊checked屬性值為true核取方塊JS
- jQuery實現的限制checkbox核取方塊選中的數目jQuery
- 純css3實現的超炫checkbox核取方塊和radio單選框CSSS3
- jquery實現的判斷checkbox核取方塊是否被選中jQuery
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- 判斷核取方塊中是否有被選中的程式碼例項
- css3實現button按鈕美化效果程式碼例項CSSS3
- JavaScript動態新增checkbox核取方塊JavaScript
- JavaScript動態建立checkbox核取方塊JavaScript
- Element原始碼分析系列6-Checkbox(核取方塊)原始碼
- JavaScript 獲取選中checkbox核取方塊的值JavaScript
- jquery獲取選中checkbox核取方塊的值jQuery
- js獲取選中checkbox核取方塊的值JS
- javascript獲取選中checkbox核取方塊的值JavaScript
- layui獲取頁面checkbox核取方塊值UI