CSS3 checkbox美化效果
本章節分享一段程式碼例項,它利用css3對checkbox核取方塊進行了簡單的美化效果。
點選核取方塊的時候有動畫過渡效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .checkbox-value { position: relative; height: 30px; line-height: 30px; padding-left: 30px; overflow: hidden; display:block; cursor:pointer; } .checkbox-value:before { transition: all 0.5s ease-in; content: ""; width: 20px; height: 20px; position: absolute; border: 2px solid rgb(0,0,0); border-radius: 4px; left: 0; top: 5px; background: #fff; overflow: hidden; cursor: pointer; } .checkbox-value:after { border: none; transition: all 0.2s ease-in; } .checkboxcon { position: relative; height: 30px; overflow: hidden; box-sizing: border-box; display: table; vertical-align: middle; } .checkbox { display: inline-block; width: 0; height: 0; opacity: 0; *width: 20px; *height: 20px; position: absolute; top: 5px; } .checkboxcon input[type=checkbox]:checked + .checkbox-value:before { transition: all 0.5s ease-in; content: ""; width: 20px; height: 20px; position: absolute; border: 2px solid rgba(0,0,0,0.5); border-radius: 4px; left: 0; top: 5px; background: #000; overflow: hidden; cursor: pointer; } .checkboxcon input[type=checkbox]:checked + .checkbox-value:after { cursor: pointer; margin-top: 5px; margin-left: 8px; content: ""; width: 4px; height: 9px; border-right: 1px solid #fff; border-bottom: 1px solid #FFF; transform: rotate(45deg); position: absolute; left: 0; top: 5px; transition: all 0.2s ease-out; } </style> <script type="text/javascript"></script> </head> <body> <label class="checkboxcon"> <input class="checkbox" type="checkbox" /> <span class="checkbox-value">請選擇</span> </label> </body> </html>
上面的程式碼非常簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).:before參閱CSS E:before/E::before偽物件選擇符一章節。
(2).transition參閱CSS3 transition一章節。
(3).border-radius參閱CSS3 border-radius圓角一章節。
(4).box-sizing參閱CSS3 box-sizing一章節。
(5).transform參閱CSS3 transform一章節。
(6).label標籤參閱<label>標籤的for屬性一章節。
(7).[type=checkbox]參閱CSS E[att="val"]屬性選擇符一章節。
相關文章
- css3美化checkbox核取方塊CSSS3
- CSS3 checkbox核取方塊和radio單選框美化效果CSSS3
- CSS3 checkbox開關按鈕效果CSSS3
- CSS3核取方塊打勾美化效果CSSS3
- CSS3 radio單選按鈕美化效果CSSS3
- css3實現的checkbox核取方塊美化程式碼例項CSSS3
- css3實現button按鈕美化效果程式碼例項CSSS3
- CSS 美化checkbox核取方塊CSS
- css3自定義checkbox核取方塊打勾效果程式碼例項CSSS3
- checkbox核取方塊美化程式碼例項
- CSS3膠囊開關美化CSSS3
- CSS模擬美化checkbox核取方塊詳解CSS
- input[type=file]使用css美化效果CSS
- 模擬美化checkbox核取方塊程式碼例項
- jQuery 實現checkBox全選效果jQuery
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- 單選按鈕美化效果程式碼
- CSS3象棋效果CSSS3
- CSS3 美化radio單選按鈕CSSS3
- JavaScript checkbox全選和全不選效果JavaScript
- 美化滾動條效果程式碼例項
- radio單選按鈕美化效果
- <input type="file">美化效果程式碼例項
- 表單提示美化效果程式碼例項
- CSS3 文字效果CSSS3
- CSS3空心圓效果CSSS3
- CSS3呼吸燈效果CSSS3
- CSS3 矩形切角效果CSSS3
- CSS3哭臉效果CSSS3
- CSS3翻轉效果CSSS3
- 總結:如何修改美化radio、checkbox的預設樣式
- css3自定義checkbox與radioboxCSSS3
- IFE糯米學院-checkbox和radio樣式的美化實現
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- CSS3圓環效果程式碼CSSS3
- CSS3箭靶效果程式碼CSSS3
- CSS3花屏文字效果CSSS3
- CSS3時間軸效果CSSS3