CSS3核取方塊打勾美化效果
預設情況下,核取方塊選中打勾並不夠美觀,所以在美觀度要求較高的網站都需要進行美化。
下面分享一個利用CSS3實現的美化效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>螞蟻部落</title> <style type="text/css"> .checkbox{ display: flex; align-items: center; cursor: pointer; position: relative; } .checkbox > input { display: none; } .input-helper{ width: 20px; height: 20px; margin-right: 5px; padding: 5px 0; position:relative; } .input-helper:after{ position: absolute; content: ""; width: 20px; height: 20px; border:1px solid #B9B9B9; opacity: 1; } .input-helper:before{ position: absolute; content: ""; width: 25px; height: 9px; border-left:2px solid #009A61; border-bottom: 2px solid #009A61; opacity: 0; filter: alpha(opacity=0); transition: .3s ease; } .checkbox > input:checked + .input-helper:after{ opacity: 0; } .checkbox > input:checked + .input-helper:before{ transform: rotate(-50deg); opacity: 1; } </style> </head> <body> <div class="box"> <label class="checkbox checkbox-inline"> <input type="checkbox" value="option1"> <i class="input-helper"></i> 螞蟻部落一 </label> <label class="checkbox checkbox-inline"> <input type="checkbox" value="option1"> <i class="input-helper"></i> 螞蟻部落二 </label> </div> </body> </html>
上面程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼.checkbox{ display: flex; align-items: center; cursor: pointer; }
將其應用彈性盒模型,內部的專案是垂直居中的。
[CSS] 純文字檢視 複製程式碼.checkbox > input { display: none; }
將核取方塊隱藏起來。
[CSS] 純文字檢視 複製程式碼.input-helper{ width: 20px; height: 20px; margin-right: 5px; padding: 5px 0; position:relative; }
設定<i>的一些相關樣式,比較簡單。
並且將其設定為相對定位,那麼它的定位子元素就以它為位移參考物件。
[CSS] 純文字檢視 複製程式碼.input-helper:after{ position: absolute; content: ""; width: 20px; height: 20px; border:1px solid #B9B9B9; opacity: 1; }
利用偽元素選擇器,<i>底部新增一個長寬分別為20px並且帶有邊框的偽元素。
這個就是我們所看到的類似於核取方塊的矩形框。
[CSS] 純文字檢視 複製程式碼.input-helper:before{ position: absolute; content: ""; width: 25px; height: 9px; border-left:2px solid #009A61; border-bottom: 2px solid #009A61; opacity: 0; transition: .3s ease; }
再通過一個位移選擇器,新增一個只有左邊框和下邊框的元素,這個就是對勾。
當然需要旋轉一定角度才能呈現對勾的姿勢;它被矩形框所覆蓋。
預設是完全透明的。
最後設定它的所有屬性改變都以動畫的方式進行。
[CSS] 純文字檢視 複製程式碼.checkbox > input:checked + .input-helper:after{ opacity: 0; }
雖然核取方塊被隱藏,但是它被包含在label中,所以點選label也能實現核取方塊的選中和取消選中效果。
當核取方塊被選中,那麼就隱藏通過:after偽元素選擇器新增的偽元素,也就是隱藏矩形框。
[CSS] 純文字檢視 複製程式碼.checkbox > input:checked + .input-helper:before{ transform: rotate(-50deg); opacity: 1; }
和上面原理是一樣的,它會使元素旋轉-50度,這樣就呈現對勾模樣。
並且將其設定為不透明,否則我們也無法看到對勾。
二.相關閱讀:
(1).display: flex參閱display:flex彈性佈局一章節。
(2).>參閱CSS (E>F)子選擇符一章節。
(3).:after參閱CSS E::after 偽物件選擇器一章節。
(4).transition參閱CSS3 transition一章節。
(5).+參閱CSS (E+F)相鄰選擇符一章節。
(6).transform參閱CSS3 transform一章節。
相關文章
- css3美化checkbox核取方塊CSSS3
- css3自定義checkbox核取方塊打勾效果程式碼例項CSSS3
- CSS3 checkbox核取方塊和radio單選框美化效果CSSS3
- CSS 美化checkbox核取方塊CSS
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- css3實現的checkbox核取方塊美化程式碼例項CSSS3
- checkbox核取方塊美化程式碼例項
- CSS模擬美化checkbox核取方塊詳解CSS
- 模擬美化checkbox核取方塊程式碼例項
- jQuery核取方塊全選和全不選效果jQuery
- javascript核取方塊全選和反選效果JavaScript
- js核取方塊全選和取消全選效果JS
- JavaScript 核取方塊全選和取消全選效果JavaScript
- jquery實現checkbox核取方塊全選效果jQuery
- js獲取checkbox核取方塊checked屬性值為true核取方塊JS
- 10個HTML5美化版核取方塊和單選框HTML
- js實現checkbox核取方塊的反選效果JS
- jQuery核取方塊全選和全不選效果程式碼jQuery
- 8個非常個性化的CSS3單/核取方塊CSSS3
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- HTML input checkbox 核取方塊HTML
- HTML input checkbox核取方塊HTML
- ElementUi Table核取方塊回顯UI
- jQuery checkbox核取方塊操作jQuery
- 單選按鈕和核取方塊
- DevExpress XtraTreeList的核取方塊 禁用devExpress
- 原生js實現的核取方塊的全選和全不選效果JS
- CSS3 checkbox美化效果CSSS3
- layui獲取頁面checkbox核取方塊值UI
- JavaScript獲取選中checkbox核取方塊值JavaScript
- jQuery獲取所有的checkbox核取方塊元素jQuery
- js 獲取被選中核取方塊的值JS
- PyQT5 實現下拉核取方塊QT
- JavaScript 核取方塊全選和全不選JavaScript
- JavaScript 限制核取方塊選中數目JavaScript
- checkbox 核取方塊全選程式碼
- 在java和Scenebuilder隱藏核取方塊JavaUI
- JavaScript動態新增checkbox核取方塊JavaScript