首頁 > 文章 > web前端 > 利用CSS自訂綠色複選框按鈕的樣式

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

不言原創: 2018-06-12 09:51:372647瀏覽

這篇文章主要介紹了關於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: &#39;&#39;;   
    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自訂綠色複選框按鈕的樣式

相關文章