使用CSS3美化HTML表單的技巧演示

2020-03-24 16:01:40

字體：大中小

供稿：網(wǎng)友

表單是做網(wǎng)頁(yè)中很常使用到的元素，但預(yù)設(shè)的樣式都是丑丑的，筆者今天要教各位快速做出自訂的單/多選框樣式，讓您的表單硬是要跟別人不一樣。
基本 HTML 就是一個(gè)單選框元素加上標(biāo)簽元素：XML/HTML Code復(fù)制內(nèi)容到剪貼板
h3 性別(單選) /h3 div >每一個(gè)標(biāo)簽元素中特過 for 屬性來跟單選框元素一一配對(duì)，當(dāng)點(diǎn)擊到標(biāo)簽元素時(shí)，則同時(shí)會(huì)觸發(fā)點(diǎn)擊到相對(duì)應(yīng)的單選框。而我們不想要丑丑的單選框元素，所以筆者先用 CSS 將它隱藏起來。CSS Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140101-1input[type= radio ]{ display:none; }
.abgne-menu-20140101-1input[type= radio ]+label{ display:inline-block; background-color:#ccc; cursor:pointer; padding:5px10px; }
筆者只是做一些很簡(jiǎn)單的樣式設(shè)計(jì)，同時(shí)加上自訂鼠標(biāo)游標(biāo)為 pointer，讓使用者知道它是可以點(diǎn)擊的。而比較特別的是 + 這個(gè)符號(hào)，它是相鄰兄弟選擇器(Adjacent Sibling Selector)。范例中要找的標(biāo)簽元素是得要跟在單選框元素后的才行，若是改成 #male + label 的話：
就真的只有在 #male 后的下一個(gè)標(biāo)簽元素才會(huì)有效果，其它更后面的兄弟元素則是不會(huì)有反應(yīng)的唷。好啦~現(xiàn)在若沒問題的話，就會(huì)看到基本的樣式出來了：
最后只要再搭配 :checked 擬類別(Pseudo-html' target='_blank'>classes)就能收工下班啦！CSS Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140101-1input[type= radio ]:checked+label{ background-color:#f00; color:#fff; }
這邊是針對(duì)被點(diǎn)選到的單選框元素后的下一個(gè)標(biāo)簽元素進(jìn)行設(shè)定。整個(gè)完成后的樣式就變成了：
而多選框的自訂方式也可以依此類推來設(shè)定。XML/HTML Code復(fù)制內(nèi)容到剪貼板
h3 專長(zhǎng)(多選) /h3 div >CSS 的部份只要將 input[type= radio ] 改成 input[ checkbox ] 就可以了CSS Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140101-2input[type= checkbox ]{ display:none; } .abgne-menu-20140101-2input[type= checkbox ]+label{ display:inline-block; background-color:#ccc; cursor:pointer; padding:5px10px; } .abgne-menu-20140101-2input[type= checkbox ]:checked+label{ background-color:#f3d42e; }
下面則是要教大家如何憑空產(chǎn)生出單/多選框的元素囉。一樣是一個(gè) radio 元素加一個(gè)專屬的 label 元素：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140109-1,.abgne-menu-20140109-1li{ list-style:none; margin:5px0; padding:0; } .abgne-menu-20140109-1label{ cursor:pointer; display:block; width:120px; position:relative; line-height:31px; } .abgne-menu-20140109-1input[type= radio ]{ display:none; }
這些部份在用 CSS3 做表單 - 自訂單/多選框樣式(一)中應(yīng)該都有學(xué)過吧，就只是先把 radio 元素隱藏起來。接著，筆者要使用 ::after 擬元素(Pseudo-elements)在 lable 元素中產(chǎn)生用來代替單選框樣式的元素：CSS Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140109-1label::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;/*跟文字產(chǎn)生距離*/ }
擬元素的內(nèi)容是透過 content 屬性來指定的，且一樣能用 CSS 來裝置它。
仔細(xì)看一下 DevTools 的畫面：
雖然是叫 after，但其實(shí)是將元素產(chǎn)生并放置在 label 元素中，所以點(diǎn)擊到該元素也等同點(diǎn)擊到 label 元素。最后快來補(bǔ)上當(dāng) radio:checked 時(shí)的變化囉：CSS Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140109-1input[type= radio ]:checked+label::after{ content: Yes ; background:green; }
line-height:31px; padding-left:40px;/*加上距離*/ } .abgne-menu-20140109-1label::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-1input[type= radio ]:checked+label::before{ content: Yes ; background:green; }
其中 lable 元素的 padding-left 是為了跟擬元素產(chǎn)生距離以免靠的太近太擠~
多選框的做法也是一樣，只是將 radio 改成 checkbox 就可以了：CSS Code復(fù)制內(nèi)容到剪貼板
.abgne-menu-20140109-2,.abgne-menu-20140109-2li{ list-style:none; margin:5px0; padding:0; } .abgne-menu-20140109-2label{ cursor:pointer; display:block; width:120px; position:relative; line-height:31px; } .abgne-menu-20140109-2label::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; rightright:0; } .abgne-menu-20140109-2input[type= checkbox ]{ display:none; } .abgne-menu-20140109-2input[type= checkbox ]:checked+label::after{ content: Yes ; background:green; }更多編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML CSS樣式基礎(chǔ)(必看篇)

下一篇：使用HTML和CSS3繪制基本卡通圖案的示例分享