在用 CSS3 做表單 - 自訂單/多選框樣式(一)中學到將 label 標籤改成帶有單/多選框的功能,而現在則是要教大家如何憑空產生出單/多選框的元素囉。
一樣是一個 radio 元素加一個專屬的 label 元素:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <h3>性別(單選)</h3> <ul class="abgne-menu-20140109-1"> <li> <input type="radio" id="male" name="sex"> <label for="male">我是男生</label> </li> <li> <input type="radio" id="female" name="sex"> <label for="female">我是女生</label> </li> <li> <input type="radio" id="other" name="sex"> <label for="other">我不想說</label> </li> </ul> </body> |
先進行基本的樣式設計:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .abgne-menu-20140109-1, .abgne-menu-20140109-1 li { list-style: none; margin: 5px 0; padding: 0; } .abgne-menu-20140109-1 label { cursor: pointer; display: block; width: 120px; position: relative; line-height: 31px; } .abgne-menu-20140109-1 input[type="radio"] { display: none; } |
這些部份在用 CSS3 做表單 - 自訂單/多選框樣式(一)中應該都有學過吧,就只是先把 radio 元素隱藏起來。
接著,筆者要使用 ::after 擬元素(Pseudo-elements)在 lable 元素中產生用來代替單選框樣式的元素:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .abgne-menu-20140109-1 label::after { content: "No"; display: inline-block; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; padding: 3px; color: #FFF; background: #f00; text-align: center; margin-left: 10px; /* 跟文字產生距離 */ } |
擬元素的內容是透過 content 屬性來指定的,且一樣能用 CSS 來裝置它。
仔細看一下 DevTools 的畫面:
雖然是叫 after,但其實是將元素產生並放置在 label 元素中,所以點擊到該元素也等同點擊到 label 元素。最後快來補上當 radio:checked 時的變化囉:
檢視原始碼 CSS
1 2 3 4 | .abgne-menu-20140109-1 input[type="radio"]:checked + label::after { content: "Yes"; background: green; } |
如果想要改放在前方時,就改換成使用 ::before:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .abgne-menu-20140109-1 label { cursor: pointer; display: block; width: 120px; position: relative; line-height: 31px; padding-left: 40px; /* 加上距離 */ } .abgne-menu-20140109-1 label::before { content: "No"; display: inline-block; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; padding: 3px; color: #FFF; background: #f00; text-align: center; position: absolute; left: 0; } .abgne-menu-20140109-1 input[type="radio"]:checked + label::before { content: "Yes"; background: green; } |
其中 lable 元素的 padding-left 是為了跟擬元素產生距離以免靠的太近太擠~
多選框的做法也是一樣,只是將 radio 改成 checkbox 就可以了:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .abgne-menu-20140109-2, .abgne-menu-20140109-2 li { list-style: none; margin: 5px 0; padding: 0; } .abgne-menu-20140109-2 label { cursor: pointer; display: block; width: 120px; position: relative; line-height: 31px; } .abgne-menu-20140109-2 label::after { content: "No"; display: inline-block; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; padding: 3px; color: #FFF; background: #f00; text-align: center; position: absolute; right: 0; } .abgne-menu-20140109-2 input[type="checkbox"] { display: none; } .abgne-menu-20140109-2 input[type="checkbox"]:checked + label::after { content: "Yes"; background: green; } |
有沒有覺得 CSS3 真的是很強大咧~
快動力來試試~
See the Pen [CSS3]用 CSS3 做表單 - 自訂單/多選框樣式(二) by abgne.tw (@abgne-tw) on CodePen.