亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

abgne   發(fā)布時(shí)間：2016-05-17 11:33:49   作者：佚名   我要評(píng)論
這篇文章主要介紹了使用CSS3美化HTML表單的技巧演示,包括單選框元素的隱藏以及選項(xiàng)之間的間隔等調(diào)整方法,需要的朋友可以參考下

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

基本 HTML 就是一個(gè)單選框元素加上標(biāo)簽元素：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.  <h3>性別(單選)</h3>  
  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>  

每一個(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)容到剪貼板
  1. .abgne-menu-20140101-1 input[type="radio"] {   
  2.  display: none;   
  3. }  

隱藏好之后，接下來就是將標(biāo)簽元素進(jìn)行改造一下：

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è)計(jì)，同時(shí)加上自訂鼠標(biāo)游標(biāo)為 pointer，讓使用者知道它是可以點(diǎn)擊的。

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

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

好啦~現(xiàn)在若沒問題的話，就會(huì)看到基本的樣式出來了：
2016517113524269.png (190×85)

最后只要再搭配 :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. }  

這邊是針對(duì)被點(diǎn)選到的單選框元素后的下一個(gè)標(biāo)簽元素進(jìn)行設(shè)定。整個(gè)完成后的樣式就變成了：
2016517113557327.png (190×85)

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.  <h3>專長(多選)</h3>  
  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. }  

是不是很簡單呢~
2016517113711857.png (300×85)

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

一樣是一個(gè) radio 元素加一個(gè)專屬的 label 元素：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.  <h3>性別(單選)</h3>  
  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>  

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

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 來裝置它。
2016517113800916.png (150×170)

仔細(xì)看一下 DevTools 的畫面：
2016517113818546.png (515×170)

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .abgne-menu-20140109-1 input[type="radio"]:checked + label::after {   
  2.  content: "Yes";   
  3.  background: green;   
  4. }  

如果想要改放在前方時(shí)，就改換成使用 ::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)生距離以免靠的太近太擠~
2016517113926549.png (150×170)

多選框的做法也是一樣，只是將 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 真的是很強(qiáng)大咧~
2016517114013442.png (150×200)

相關(guān)文章

  • html5表單及新增的改良元素詳解

    下面小編就為大家?guī)硪黄猦tml5表單及新增的改良元素詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-07

  • CSS實(shí)現(xiàn)學(xué)生入學(xué)畢業(yè)檔案漂亮表單樣式特效源碼

    CSS實(shí)現(xiàn)學(xué)生入學(xué)畢業(yè)檔案漂亮表單樣式特效源碼是一款使用的學(xué)生檔案記錄表單代碼，支持提交內(nèi)容時(shí)自動(dòng)驗(yàn)證手機(jī)號(hào)和郵箱，所屬院校是下拉列表式的可選擇，基礎(chǔ)水平根入學(xué)成
    2016-06-02

  • 淺談表單中的只讀和禁用屬性

    下面小編就為大家?guī)硪黄獪\談表單中的只讀和禁用屬性。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-14

最新評(píng)論