DIV CSS 佈局教程網

這篇文章主要為大家分享一款CSS自定義綠色復選框按鈕樣式，

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

效果圖:

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

XML/Html Code復制內容到剪貼板

1. <div class="i-check">
2. <input type="checkbox" value="0" />
3. <label></label>
4. </div>

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

CSS Code復制內容到剪貼板

1. .i-check {
2. width: 20px;
3. height: 20px;
4. position: relative;
5. margin: 20px auto;
6. }

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

CSS Code復制內容到剪貼板

1. .i-check label {
2. width: 20px;
3. height: 20px;
4. cursor: pointer;
5. position: absolute;
6. top: 0;
7. left: 0;
8. background: #1A9909;
9. border-radius: 4px;

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

CSS Code復制內容到剪貼板

1. .i-check label:after {
2. content: '';
3. width: 9px;
4. height: 5px;
5. position: absolute;
6. top: 4px;
7. left: 4px;
8. border: 3px solid #fff;
9. border-top: none;
10. border-right: none;
11. background: transparent;
12. opacity: 0;
13. transform: rotate(-45deg);
14. }

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

CSS Code復制內容到剪貼板

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

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

CSS Code復制內容到剪貼板

1. .i-check input[type=checkbox] {
2. opacity: 0;
3. position: absolute;
4. z-index: 2;
5. left: 0;
6. top: 0;
7. width: 100%;
8. height: 100%;
9. margin: 0;
10. }

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