這篇文章主要介紹了關於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中文網其他相關文章!