html自帶的核取方塊或者單選框按鈕樣式都是比較簡單的一種. 而有時候這些表單控制, 可能需要配合自己的主題樣式. 需要去美化他們. 以前可能需要借助js的實現. 現在css也可以完全實現我們想要的效果.
效果圖:
我們直奔主題. 首先想到的是, 核取方塊需要的是乙個背景色, 然後就是乙個核取方塊選中的狀態.選中狀態我們這裡用 "勾號" 來表示. html就可以簡單的表示了
xml/html code複製內容到剪貼簿
.i-check 作為整體的核取方塊.加入的css**也簡單
css code複製內容到剪貼簿
核取方塊的大小根據自己的需要而定. 這裡設定margin, 是為了顯示在瀏覽器的中間.
然後就是設定核取方塊的預設狀態, 這裡利用label來設定, 其高度和寬度都與.i-check設定一樣, 然後給其乙個背景色,設定好他的位置.
css code複製內容到剪貼簿
預設狀態我們已經弄好了. 我們繼續分析, 那這時候需要的是乙個選中狀態, 選中狀態剛已經講過用乙個勾號表示, 這裡我們利用偽類after來設定,設定其邊框,及旋轉這個after, 就變成了勾號.但是預設狀態勾號是隱藏的, 所以我們用了opacity為0.
css code複製內容到剪貼簿
好了, 整個狀態設定好了. 現在需要在點選核取方塊的時候讓勾號顯示出來.下面的**就可以完成
css code複製內容到剪貼簿
寫到這裡,不要忘記了, 讓input核取方塊設定其樣式, 為了讓使用者能夠點選到, 他的高寬度都要和整體一樣大小, 讓其在整個盒子的最頂層.這樣使用者就可以能夠隨便在這個區域就能點選. ok , 最後一步就是讓這個input核取方塊隱藏起來, 隱藏起來, 不是讓他真正的隱藏去掉, 這樣的話, 就沒有點選效果. 這裡隱藏需要的是用opacity來設定為0.
css code複製內容到剪貼簿
好了, 整個效果就完成了, 同理這個也可以去設定單選框的效果。
本文標題: css自定義綠色核取方塊按鈕樣式
本文位址: /web/css/84105.html
自定義核取方塊樣式
專案開發中嫌棄checkbox自帶樣式，查一下資料，找到怎麼自定義checkbox樣式，記錄下來，作為筆記 html label一定要放在input後面 divclass checkone inline inputtype checkbox id checkbox click clickme eve...
自定義單選按鈕 核取方塊
一直以來都對單選按鈕 radio 核取方塊 checkbox 的預設樣式感到頭疼，不夠美觀！恰好學習css3 學到了乙個選擇器 checked，學著做了乙個簡單的樣式自定義。主要的思想在於 設定自帶的樣式的透明度為0，然後使用絕對定位混淆視聽 先來說說單選按鈕 如下 css 1 style type...
html自定義核取方塊
自定義核取方塊的素材 icon check circle.png icon checked.png checkbox.html 為了方便起見，這裡使用到了jquery remember me 效果圖如下 未選中狀態 選中狀態 為提交表單時，考慮將核取方塊的內容進行提交，對上述的自定義核取方塊進行了如...