現在ue的要求是越來越多，瀏覽器原生的核取方塊checkbox他們就是做噩夢也不會接受的。那只能發揮我們前端工程師的聰明才智了。
想當年，為了相容ie，要切個背景圖，還要寫點js，難是不難，但是也挺麻煩的。如今在手機端用css3實現乙個就方便多了。
廢話不說，幹活。。。
class="checkbox">
type="checkbox">
i>
給核取方塊設定2px寬的邊框，圓角2px
設定高度和寬度未24px
.checkbox
.checkbox
input
[type=checkbox]
背景色#60b044
核取方塊選中時候為實心的綠色
預設不選擇，所以display設未none
.checkbox
i
input顯示在i標籤的上面
input的透明度設為0，讓使用者看不到
.checkbox
/*input的z-index設得高一點，讓他現實在i標籤上面*/
.checkbox
input
[type=checkbox]
.checkbox
i
主要是運用了css的偽類:checked和兄弟元素選擇器。
具體參考： [[
.checkbox
input
[type=checkbox]
:checked+i
完整**：[猛戳這裡]
前端技術交流qq群： 73895824
html自定義核取方塊
自定義核取方塊的素材 icon check circle.png icon checked.png checkbox.html 為了方便起見，這裡使用到了jquery remember me 效果圖如下 未選中狀態 選中狀態 為提交表單時，考慮將核取方塊的內容進行提交，對上述的自定義核取方塊進行了如...
自定義核取方塊樣式
專案開發中嫌棄checkbox自帶樣式，查一下資料，找到怎麼自定義checkbox樣式，記錄下來，作為筆記 html label一定要放在input後面 divclass checkone inline inputtype checkbox id checkbox click clickme eve...
CSS自定義綠色核取方塊按鈕樣式
html自帶的核取方塊或者單選框按鈕樣式都是比較簡單的一種.而有時候這些表單控制,可能需要配合自己的主題樣式.需要去美化他們.以前可能需要借助js的實現.現在css也可以完全實現我們想要的效果.效果圖 我們直奔主題.首先想到的是,核取方塊需要的是乙個背景色,然後就是乙個核取方塊選中的狀態.選中狀態我...