這篇文章是發表在我的blog上的，
:checked應用，不過有問題或意見兩邊都可以留言。
長久以來，我一直有的問題，就是表單裡面的
radio和
checkbox在樣式上難道就只能那樣嗎？在IE裡雖然可以給他加上border、background-color這一些性質，但是出來的效果卻是…，唉，不題也罷，有興趣的人可以自己試試看，沒看過的可能會嚇一跳吧。不過這個問題，終於在這兩天有了初步的解決的，雖然和我最初的希望不一樣，不過事實上自由度更大了，而且我很滿意這個效果，效果就像是現在
本站發表迴響那，「記住個人資訊?」那裡一樣。這都要歸功於強大的CSS和
<label />標籤，CSS3的
:checked擬類別（Pseudo-Classes）配合
+[b]這個CSS2就有的氏族選擇器（Asjacent Sibling Selector）和<label />標籤就可以達到我要的效果了，如果要效果更完整，還可以加上[b]opacity（透明度）這個性質（property）。當然，因為是歸功於CSS3，所以IE使用者就無法看到這有趣的效果了。
接下來，就來一步一步的設計了，如果想用在checkbox上面也可以如法泡製。首先先做出一個form物件和裡面的radio物件，以及配合radio的label，當然為了能讓label指向，每個radio都要有獨立的id，詳見
範例一，如果沒用過
<label />標籤的人，可以趁這機會測試一下
<label />的功用，你只要在
First Selection[b]、Second Selection[/b]、
Third Selection三個文字上用滑鼠點選，對應的選項就會直接被選取了，當然，你要確定radio的id和label的for一樣，事實上<label />並沒有限定它能指向的元素型態，基本上是任意物件都可以，只要你有給它指定獨立的id，只是有些物件指定了也沒什麼用。HTML的部分在這裡就已經確定成型了，接下來我們只會針對CSS的部份作修改。
再下來一步，我們要來替label標籤加上樣式，不過為了和其他非指向radio的label做區別，我們在這裡要上用
+這個選擇器還有CSS 2已經有的屬性選擇器，CSS碼長的像下面這樣。
代碼:
input[type="radio"]+label
{
border: 2px solid #66f;
padding: 1px 3px;
background-color: #ffe;
}
我們把第一行的部分單獨抓出來解釋，input[type="radio"]+label，這行的意思是：「
選擇接在input物件後面的label物件，其中，input物件的type屬性值要等於"radio"。」，如果能了解是最好，不能了解的話也沒關係，以後慢慢弄清楚
DOM就可以了，現在照著用就沒問題。再來一樣是為label上style，不過這次我們要讓被選取的選項能辨識出來，這裡我們用到了checked這個擬類別，只看選擇物件的部部份，input[type="radio"]:checked+label，這就表示只選擇被選取的radio後面的label物件。詳細請見
範例二，你可以任意選取選項看看，選取的選項的<label />馬上就會變色了。
接下來是重點了，我們要把radio物件給隱藏起來，用的方法很簡單，只是margin性質，只不過是比較少用的負margin值，順便也為了讓使用者知道<label />是可以選取的，所以加上:hover的效果，要特別注意的是設定hover的地方有兩個，結果請見
範例三。為什麼input的長度是3em，它的margin-right卻是-3.3em呢？為什麼多了0.3em呢？我也不知道 orz，我測試的結果是設剛剛好3em會無法把radio蓋住，所以加到3.3em。
光是以上的設計還會有些問題，要是label的背景色是透明怎麼辦，被蓋在後面的radio不是就會冒出來了？請見
範例四。所以我們還要把radio給隱藏起來，可以用的方法有三種，displa: none;、visibility: hidden;、opacity: 0;，在這裡我選擇了第三種，因為親合力的問題，如果我選擇了前兩種，即使我設定tabindex給他，我都無法用Tab鍵把focus移到該選項上，要是又沒有設定accesskey，那情況就會變的不太好，使用者只要無法控制滑鼠，就沒辦法對你的radio和checkbox做選擇，因此我把它隱藏起來的方法選擇讓他完全透明。而為了讓使用者能知道他的游標移到哪個選項，所以我們利用:focus這個擬類別來對label作樣式的變化，結果請見
範例五，在這個範例裡你會發現即使底色都是透明的，input物件也都看不到了，不過仍然可以用Tab來切換選項。
作到這邊，我們就完成了，你可以看到
最後的結果，下面列出了完整的HTML和全部的CSS碼，最後要提醒的就是<label />裡面可以放的不只是文字，只是?必須要注意到一件事，就是使用者能?一眼看到就知道它可以選，我的方法是先勾選一個預設值，讓他能和其他選項明顯不同，使用者能一眼就注意到，不過這方法比較適用於radio，如果是checkbox我就沒還沒有想到簡單的方法了，不過也是可以配合background-image之類的性質。如果有誤還請指正，或是有更好的方案也歡迎討論。
登入
註冊
問答集
搜尋
