溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用CSS3美化HTML表單

發(fā)布時間：2021-08-10 21:17:02 來源：億速云 閱讀：200 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用CSS3美化HTML表單”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用CSS3美化HTML表單”吧！

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2.  <h4>性別(單選)</h4>  

  3.  <div class="abgne-menu-20140101-1">  

  4.      <input type="radio" id="male" name="sex">  

  5.      <label for="male">男性</label>  

  6.     

  7.      <input type="radio" id="female" name="sex">  

  8.      <label for="female">女性</label>  

  9.     

  10.      <input type="radio" id="other" name="sex">  

  11.      <label for="other">其它</label>  

  12.  </div>  

  13. </body>  

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140101-1 input[type="radio"] {   

  2.  display: none;   

  3. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140101-1 input[type="radio"] + label {   

  2.  display: inline-block;   

  3.  background-color: #ccc;   

  4.  cursor: pointer;   

  5.  padding: 5px 10px;   

  6. }  

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

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

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

好啦~現(xiàn)在若沒問題的話，就會看到基本的樣式出來了：
怎么用CSS3美化HTML表單

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140101-1 input[type="radio"]:checked + label {   

  2.  background-color: #f00;   

  3.  color: #fff;   

  4. }  

這邊是針對被點選到的單選框元素后的下一個標簽元素進行設(shè)定。整個完成后的樣式就變成了：
怎么用CSS3美化HTML表單

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2.  <h4>專長(多選)</h4>  

  3.  <div class="abgne-menu-20140101-2">  

  4.      <input type="checkbox" id="jquery" name="skill" checked>  

  5.      <label for="jquery">jQuery</label>  

  6.     

  7.      <input type="checkbox" id="css3" name="skill">  

  8.      <label for="css3">CSS3</label>  

  9.     

  10.      <input type="checkbox" id="html5" name="skill">  

  11.      <label for="html5">HTML5</label>  

  12.     

  13.      <input type="checkbox" id="angularjs" name="skill">  

  14.      <label for="angularjs">AngularJS</label>  

  15.  </div>  

  16. </body>  

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140101-2 input[type="checkbox"] {   

  2.  display: none;   

  3. }   

  4. .abgne-menu-20140101-2 input[type="checkbox"] + label {   

  5.  display: inline-block;   

  6.  background-color: #ccc;   

  7.  cursor: pointer;   

  8.  padding: 5px 10px;   

  9. }   

  10. .abgne-menu-20140101-2 input[type="checkbox"]:checked + label {   

  11.  background-color: #f3d42e;   

  12. }  

是不是很簡單呢~
怎么用CSS3美化HTML表單

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2.  <h4>性別(單選)</h4>  

  3.  <ul class="abgne-menu-20140109-1">  

  4.   <li>  

  5.    <input type="radio" id="male" name="sex">  

  6.       <label for="male">我是男生</label>  

  7.   </li>  

  8.   <li>  

  9.    <input type="radio" id="female" name="sex">  

  10.       <label for="female">我是女生</label>  

  11.   </li>  

  12.   <li>  

  13.    <input type="radio" id="other" name="sex">  

  14.       <label for="other">我不想說</label>  

  15.   </li>  

  16.  </ul>  

  17. </body>  

先進行基本的樣式設(shè)計：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140109-1, .abgne-menu-20140109-1 li {   

  2.  list-style: none;   

  3.  margin: 5px 0;   

  4.  padding: 0;   

  5. }   

  6. .abgne-menu-20140109-1 label {   

  7.  cursor: pointer;   

  8.  display: block;   

  9.  width: 120px;   

  10.  position: relative;   

  11.  line-height: 31px;   

  12. }   

  13. .abgne-menu-20140109-1 input[type="radio"] {   

  14.  display: none;   

  15. }  

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140109-1 label::after {   

  2.  content: "No";   

  3.  display: inline-block;   

  4.  width: 25px;   

  5.  height: 25px;   

  6.  line-height: 25px;   

  7.  border-radius: 50%;   

  8.  padding: 3px;   

  9.  color: #FFF;   

  10.  background: #f00;   

  11.  text-align: center;   

  12.  margin-left: 10px; /* 跟文字產(chǎn)生距離 */  

  13. }  

擬元素的內(nèi)容是透過 content 屬性來指定的，且一樣能用 CSS 來裝置它。
怎么用CSS3美化HTML表單

仔細看一下 DevTools 的畫面：
怎么用CSS3美化HTML表單

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140109-1 input[type="radio"]:checked + label::after {   

  2.  content: "Yes";   

  3.  background: green;   

  4. }  

怎么用CSS3美化HTML表單

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140109-1 label {   

  2.  cursor: pointer;   

  3.  display: block;   

  4.  width: 120px;   

  5.  position: relative;   

  6.  line-height: 31px;   

  7.  padding-left: 40px; /* 加上距離 */  

  8. }   

  9. .abgne-menu-20140109-1 label::before {   

  10.  content: "No";   

  11.  display: inline-block;   

  12.  width: 25px;   

  13.  height: 25px;   

  14.  line-height: 25px;   

  15.  border-radius: 50%;   

  16.  padding: 3px;   

  17.  color: #FFF;   

  18.  background: #f00;   

  19.  text-align: center;   

  20.  position: absolute;   

  21.  left: 0;   

  22. }   

  23. .abgne-menu-20140109-1 input[type="radio"]:checked + label::before {   

  24.  content: "Yes";   

  25.  background: green;   

  26. }  

其中 lable 元素的 padding-left 是為了跟擬元素產(chǎn)生距離以免靠的太近太擠~
怎么用CSS3美化HTML表單

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .abgne-menu-20140109-2, .abgne-menu-20140109-2 li {   

  2.  list-style: none;   

  3.  margin: 5px 0;   

  4.  padding: 0;   

  5. }   

  6. .abgne-menu-20140109-2 label {   

  7.  cursor: pointer;   

  8.  display: block;   

  9.  width: 120px;   

  10.  position: relative;   

  11.  line-height: 31px;   

  12. }   

  13. .abgne-menu-20140109-2 label::after {   

  14.  content: "No";   

  15.  display: inline-block;   

  16.  width: 25px;   

  17.  height: 25px;   

  18.  line-height: 25px;   

  19.  border-radius: 50%;   

  20.  padding: 3px;   

  21.  color: #FFF;   

  22.  background: #f00;   

  23.  text-align: center;   

  24.  position: absolute;   

  25.  rightright: 0;   

  26. }   

  27. .abgne-menu-20140109-2 input[type="checkbox"] {   

  28.  display: none;   

  29. }   

  30. .abgne-menu-20140109-2 input[type="checkbox"]:checked + label::after {   

  31.  content: "Yes";   

  32.  background: green;   

  33. }  

有沒有覺得 CSS3 真的是很強大咧~
怎么用CSS3美化HTML表單

感謝各位的閱讀，以上就是“怎么用CSS3美化HTML表單”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用CSS3美化HTML表單這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手