利用CSS自訂綠色複選框按鈕的樣式

這篇文章主要介紹了關於CSS自訂綠色複選框按鈕的樣式，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

HTML內建的複選框或者單選框按鈕樣式都是比較簡單的一種. 而有時候這些表單控制, 可能需要配合自己的主題樣式. 需要去美化他們. 以前可能需要藉助JS的實現. 現在CSS也可以完全實現我們想要的效果.

:

我們直奔主題. 首先想到的是, 複選框需要的是一個背景色, 然後就是一個複選框選中的狀態.選中狀態我們這裡用 "勾號" 來表示. HTML就可以簡單的表示了

<p class="i-check">       <input type="checkbox" value="0" />       <label></label></p>

.i-check 作為整體的複選框.加入的CSS代碼也簡單

.i-check {       width: 20px;       height: 20px;       position: relative;       margin: 20px auto;   }

複選框的大小根據自己的需要而定. 這裡設定margin, 是為了顯示在瀏覽器的中間.
然後就是設定複選框的預設狀態, 這裡利用label來設定, 其高度和寬度都與.i-check設定一樣, 然後給其一個背景色,設定好他的位置.

.i-check label {      width: 20px;      height: 20px;      cursor: pointer;      position: absolute;      top: 0;      left: 0;      background: #1A9909;      border-radius: 4px;

預設狀態我們已經弄好了. 我們繼續分析, 那這時候需要的是一個選中狀態, 選中狀態剛已經講過用一個勾號表示, 這裡我們利用偽類after來設定,設定其邊框,及旋轉這個after, 就變成了勾號.但是預設狀態勾號是隱藏的, 所以我們用了opacity為0.

.i-check  label:after {       content: '';       width: 9px;       height: 5px;       position: absolute;       top: 4px;       left: 4px;       border: 3px solid #fff;       border-top: none;       border-right: none;       background: transparent;       opacity: 0;       transform: rotate(-45deg);   }

好了, 整個狀態設定好了. 現在需要在點擊複選框的時候讓勾號顯示出來.下面的代碼就可以完成

.i-check input[type=checkbox]:checked + label:after {       opacity: 1;   }

寫到這裡,不要忘記了, 讓Input複選框設定其樣式, 為了讓使用者能夠點擊到, 他的高寬度都要和整體一樣大小, 讓其在整個盒子的最頂層.這樣使用者就可以能夠隨便在這個地區就能點擊. OK , 最後一步就是讓這個input複選框隱藏起來, 隱藏起來, 不是讓他真正的隱藏去掉, 這樣的話, 就沒有點擊效果. 這裡隱藏需要的是用opacity來設定為0.

.i-check input[type=checkbox] {       opacity: 0;       position: absolute;       z-index: 2;       left: 0;       top: 0;       width: 100%;       height: 100%;       margin: 0;   }

好了, 整個效果就完成了, 同理這個也可以去設定單選框的效果。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！