表單是做網(wǎng)頁中很常使用到的元素，但預設的樣式都是丑丑的，筆者今天要教各位快速做出自訂的單/多選框樣式，讓您的表單硬是要跟別人不一樣。

基本 HTML 就是一個單選框元素加上標簽元素：

每一個標簽元素中特過 for 屬性來跟單選框元素一一配對，當點擊到標簽元素時，則同時會觸發(fā)點擊到相對應的單選框。而我們不想要丑丑的單選框元素，所以筆者先用 CSS 將它隱藏起來。

隱藏好之后，接下來就是將標簽元素進行改造一下：

筆者只是做一些很簡單的樣式設計，同時加上自訂鼠標游標為 pointer，讓使用者知道它是可以點擊的。

而比較特別的是 + 這個符號，它是相鄰兄弟選擇器(Adjacent Sibling Selector)。范例中要找的標簽元素是得要跟在單選框元素后的才行，若是改成 #male + label 的話：

就真的只有在 #male 后的下一個標簽元素才會有效果，其它更后面的兄弟元素則是不會有反應的唷。

好啦~現(xiàn)在若沒問題的話，就會看到基本的樣式出來了：

最后只要再搭配 :checked 擬類別(Pseudo-classes)就能收工下班啦！

這邊是針對被點選到的單選框元素后的下一個標簽元素進行設定。整個完成后的樣式就變成了：

而多選框的自訂方式也可以依此類推來設定。

CSS 的部份只要將 input[type="radio"] 改成 input["checkbox"] 就可以了

是不是很簡單呢~

下面則是要教大家如何憑空產(chǎn)生出單/多選框的元素囉。

一樣是一個 radio 元素加一個專屬的 label 元素：

先進行基本的樣式設計：

這些部份在用 CSS3 做表單 - 自訂單/多選框樣式(一)中應該都有學過吧，就只是先把 radio 元素隱藏起來。

接著，筆者要使用 ::after 擬元素(Pseudo-elements)在 lable 元素中產(chǎn)生用來代替單選框樣式的元素：

擬元素的內(nèi)容是透過 content 屬性來指定的，且一樣能用 CSS 來裝置它。

仔細看一下 DevTools 的畫面：

雖然是叫 after，但其實是將元素產(chǎn)生并放置在 label 元素中，所以點擊到該元素也等同點擊到 label 元素。最后快來補上當 radio:checked 時的變化囉：

如果想要改放在前方時，就改換成使用 ::before：

其中 lable 元素的 padding-left 是為了跟擬元素產(chǎn)生距離以免靠的太近太擠~

多選框的做法也是一樣，只是將 radio 改成 checkbox 就可以了：

有沒有覺得 CSS3 真的是很強大咧~