自定義單選按鈕 核取方塊

一直以來都對單選按鈕（radio） / 核取方塊（checkbox） 的預設樣式感到頭疼，不夠美觀！

恰好學習css3 學到了乙個選擇器 ：checked，學著做了乙個簡單的樣式自定義。

主要的思想在於：設定自帶的樣式的透明度為0，然後使用絕對定位混淆視聽

先來說說單選按鈕

**如下：

css:

1

<
style 
type
="text/css"
>2*
6.content
13.***
17.radio_btn
26.radio_btn input
35.radio_btn span
46.radio_btn input[type="radio"] + span
49.radio_btn input[type="radio"]:checked + span
52style
>

1

<
div 
class
="content"
>
2<
div 
class
="***"
>34
<
span 
class
="radio_btn"
>
5<
input 
type
="radio"
name
="***"
id="man"
/>
6<
span
>
span
>
7span
>
8<
label 
for="man"
>男
label
>910
<
span 
class
="radio_btn"
>
11<
input 
type
="radio"
name
="***"
id="male"
>
12<
span
>
span
>
13span
>
14<
label 
for="male"
>女
label
>
1516
div>
17div
>

圖1-1

相對於預設樣式，是不是看起來舒服多了？下面我們看看核取方塊

css:

<

div 
class
>
<
div 
class
="box"
>
<
input 
type
="checkbox"
checked
="checked"
id="milk"
/><
span
>√
span
>
div>
<
lable 
for="milk"
>牛奶
lable
>
div>
<
div 
class
>
<
div 
class
="box"
>
<
input 
type
="checkbox"
id="water"
/><
span
>√
span
>
div>
<
label 
for="water"
>水
label
>
div>

<

style 
type
="text/css"
>
.check-box 
.box 
.box input 
.box span 
input[type="checkbox"] + span 
input[type="checkbox"]:checked + span 
style
>

牛奶

水 圖1-2

以上內容，如有錯誤請指出，不甚感激。

CSS自定義綠色核取方塊按鈕樣式

html自帶的核取方塊或者單選框按鈕樣式都是比較簡單的一種.而有時候這些表單控制,可能需要配合自己的主題樣式.需要去美化他們.以前可能需要借助js的實現.現在css也可以完全實現我們想要的效果.效果圖 我們直奔主題.首先想到的是,核取方塊需要的是乙個背景色,然後就是乙個核取方塊選中的狀態.選中狀態我...

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...