這篇文章主要介紹了關於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;
}好了, 整個效果就完成了, 同理這個也可以去設定單選框的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是利用CSS自訂綠色複選框按鈕的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
