總結自定義表單樣式的控件，涉及到一些css偽類偽元素知識

css組合選擇符

css組合選擇符在自定義表單控件中扮演著連接的作用，便於控制元素樣式，css3中有四種組合選擇符。

後代選擇器 ：以空格分離，選擇後代相匹配的元素；#div p 選擇的是#div下所有的p元素

子元素選擇器 ：以大於號分離，選擇子元素相匹配的元素；#div>p 選擇的是#div下直接子元素為p元素

相鄰兄弟選擇器 ：以加號分離，選擇緊接的元素，二者有相同父級，#div+p選擇的是#div相鄰的p，只是第一個，因為第一個相鄰的

後續兄弟選擇器 ：以波浪線分離，選擇所有相鄰兄弟元素，都有相同的父級，#div~p 選擇的是#div相鄰的所有的p元素

偽類和偽元素

偽類 通過選擇器找到不存在DOM樹中的信息以及一些css選擇器獲得不到的信息，一般用冒號開頭

常見的偽類

  anchors偽類                                           
  a:link      //未訪問的鏈接                               
  a:visited   //已訪問的鏈接
  a:hover     //鼠標滑過的鏈接
  a:active    //已選中的鏈接
  ?
  css-偽類
  :first-child  //元素的第一個子元素
  :last-child   //元素的最後一個子元素
  :nth-child(n) //元素的第n個子元素
  :first-letter //常用作文本，選擇元素的第一個字母
  :first-line   //常用作文本，選擇元素的第一行
  :checked      //選中的表單元素，比如radio Checkbox option
  :disabled     //禁用的表單元素
  :focused      //元素輸入後具有焦點的元素
 

偽元素 在DOM樹中創建一些抽象的元素，不存在與文檔語言中，css為區分偽類和偽元素，偽元素為::

常見的偽元素有

  ::before 作為元素的第一個子節點插入DOM中
  ::after 作為元素的左右一個子節點插入DOM中  //常常與content相匹配生成內容，這裏content有點意思，後面詳細說

label標簽

此標簽表示用戶界面中項目的標題，是內聯元素inline，通常關聯表單控件，或者放入其中

  //直接嵌套型
  <label>click <input type=‘text‘ id=‘user‘ name=‘username‘></label>
  //
 
for綁定id型
  <label for=‘user‘>click</label>   
  <input type=‘text‘ id=‘user‘ name=‘username‘>

除了綁定這些控件，還搭配選擇組

optgroup

<optgroup label=‘fruit‘>

自定義控件樣式的實現

主要原理：

• 隱藏原生的input控件

• 使用label，對label添加樣式，使其代替原來的控件

因為，label可以關聯到所指定的控件，因而既可以為label添加樣式，顯示出控件樣子；又可以使checkbox有原來的動態(即單選、多選)

雪碧圖和圖標字體

雪碧圖

css圖像合成技術，主要用來弄小圖標的，雪碧圖直接合成在一張圖片上；作用：減少過多的文件請求，減少http請求。

圖標字體

font-awesome

代碼部分

方法一: 利用checked和:after

HTML結構

  <div id="first">
        Checkbox控件<br>
        <input type="checkbox" name="box" id="box1">
        <label for="box1"></label>
        <input type="checkbox" name="box" id="box2">
        <label for="box2"></label>
        <input type="checkbox" name="box" id="box3">
        <label for="box3"></label><br>
        radio控件<br>
        <input type="radio" name="radios" id="radio1">
        <label for="radio1"></label>
        <input type="radio" name="radios" id="radio2">
        <label for="radio2"></label>
  </div>

CSS樣式

     //隱藏原來的input控件
     #first input{     
        display:none;
     }
     /*checkbox  設置label*/
     #first input[type=‘checkbox‘]+label{    
        width:16px;
        height:16px;
        display:inline-block;
        border:1px solid #d9d9d9;
     }
     /*:checked後*/
     #first input[type=‘checkbox‘]:checked+label:after{
        content:‘\2714‘;                   /*這裏的content內容有點意思，另一篇文章中再總結*/
        color:red;
        width:8px;
        height:8px;
        line-height:8px;
        text-align:center;
        font-size:20px;
     }
     /*radio   設置label*/
     #first input[type=‘radio‘]+label{     
        width:16px;                       
        height:16px;
        display:flex;                     /*這裏必須用flex布局,radio的label中的點才會出現*/
        border:1px solid #d9d9d9;
        border-radius:50%;
     }
     /*:checked後*/
     #first input[type=‘radio‘]:checked+label::after{
        border-radius: 50%;
              width: 8px;
              height: 8px;
              line-height: 8px;
              content: ‘‘;
              margin:auto;
              background: #d73d32;
     }
     /*:checked的input的邊框變化*/
     #first input:checked+label{
        border:1px solid #d73d32;
     }

方法二: 直接利用雪碧圖定位獲取

css樣式

      /*為所有的label設置寬高 背景*/
      #fisrt input+label{
          width: 16px;
          height:16px;
          border:none;
          display: inline-block;
          background:url(‘bg.png‘) no-repeat;
      }   
      /*利用雪碧圖定位一開始的CheckBox radio背景*/
      #first input[type=‘checkbox‘]+label{
         background-position:-25px -32px;
      }
      #first input[type=‘radio‘]+label{
          background-position: -24px -10px;
      }
      /*利用雪碧圖定位選中後的CheckBox radio背景*/
      #first input[type=‘checkbox‘]:checked+label{
          background-position: -60px -32px;
      }
      #first input[type=‘radio‘]:checked+label{
          background-position: -59px -10px;
      }

總結

兩種方法都是通過設置label的樣式代替原生的樣式；前者是利用:before,:after來添加內容；後者是利用圖片直接添加；這個過程都利用:checked觸發動作而生成。

歡迎訪問我的個人網站：博客地址

表單自定義樣式