---

關於表單樣式

【注意】：以下樣式只在Chrome瀏覽器下設定成功，其它瀏覽器可能有所差異，需要單獨設定、自行調整

一、文字框樣式

• 正常情況下，普通文字框的樣式如下（未聚焦和聚焦狀態）

  

• 首先，文字框的樣式大部分都可以通過我們已知的CSS屬性進行修改

  input[type=text] {
      /* 通過width/height設定寬高 */
      width: 100px;
      height: 30px;
      /* 設定字型樣式 */
      font-size: 18px;
      font-weight: bold;
      /* 設定內邊距 */
      padding: 0 5px;
  }
  

  

• 然後，最重要的應該是邊框樣式的設定，也是我們非常熟悉的border屬性

  PS：以下樣式的設定是在上面樣式設定的基礎上進行的

  input[type=text] {
      /* 通過border設定邊框樣式 */
      border:5px solid red;
      border-radius: 8px;
  }
  

  【注意】：如果不設定邊框樣式，就會出現下面圖片中第一種情況，即左上部分的顏色要暗一點

  

• 其次，當聚焦時，文字框周圍會有一圈輪廓，我們可以通過outline屬性來控制

  input[type=text] {
      /* 通過outline設定輪廓 */
      outline-style: dashed;
      outline-offset: 5px;
      outline-color: dodgerblue;
      outline-width: 5px;
      /* outline: none; */
  }
  

  解析：

  outline-offset：即輪廓對文字框的偏移量，可以為負數，負數即顯示在文字框內部

  outline-color：輪廓顏色

  outline-width：輪廓寬度

  outline-style：輪廓樣式

  【注意】：如果設定了輪廓樣式，則輪廓會常顯；不設定樣式，則預設在聚焦時才顯示，預設樣式為直線，輪廓無法圓角

  一般情況，設定outline:none即可 (隱藏輪廓)

  

• 接下來，通過:focus偽類，來控制文字框聚焦時的樣式

  input[type=text]:focus {
      /* 聚焦時樣式 */
      box-shadow: 0px 0px 12px -1px #b1c1c3;
  }
  

  新增聚焦時的樣式，如陰影，輪廓樣式等等

  

• 還可以通過:placeholder偽類來控制提示資訊的樣式

  input[type=text]::placeholder {
      /* 提示資訊樣式 */
      font-size: 14px;
      color: rgba(136, 127, 127, 0.774);
  }
  

  

---

二、選框樣式

結合<label>標籤，為繫結的選框設定樣式

• 前提條件：標籤的for屬性要與選框的id屬性相同，即進行了繫結

• 實現思路：

  • 隱藏選框，再為<label>標籤新增::before偽類或者::after偽類
  • 通過這個偽類設定新的樣式
  • 結合選框的:checked偽類屬性，設定選中狀態時的樣式

• 實現過程：（以單選框為例）

  • 隱藏單選框

    input[type="radio"] {
        /* 直接設定大小為0 */
        width: 0;
        height: 0;
    }
    

  • 新增偽類

    label::before {
        content: "";
        display: inline-block;
        /* 用vertical-align來對齊文字 */
        vertical-align: middle;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        border-radius: 50%;
        border: 5px solid darkgreen;
    }
    
    

• 選中狀態

  input[type="radio"]:checked+label::before {
      background-color: lightgreen;
      padding: 0px;
  }
  

  

• 或者直接給<label>標籤設定樣式，再結合:checked偽類屬性，設定選中樣式

  

三、按鈕樣式

• 先設定基本樣式，用常用的屬性就可以設定

  input[type=button],
  input[type=submit],
  input[type=reset] {
      width: 80px;
      height: 30px;
      color: white;
      background-color: #5bb85d;
      font-size: 18px;
      font-weight: bold;
  }
  

  

• 主要是邊框樣式，和文字框樣式的邊框設定一樣，使用border屬性，更改預設的邊框樣式，使用outline屬性，更改預設輪廓樣式

  input[type=button],
  input[type=submit],
  input[type=reset] {
      /* border+outline */
      border-radius: 3px;
      border: none;
      outline: none;
  }
  

  

其它的還可以通過偽類屬性，設定點選時的樣式:active，聚焦時的樣式:focus，等等

四、下拉框樣式

• 基本樣式還是可以用已知的屬性來設定，對於邊框仍然採用border+outline屬性來設定

  select {
      width: 150px;
      height: 30px;
      color: #444;
      font-size: 16px;
      font-weight: bold;
      /* border+outline */
      border-radius: 3px;
      border: 3px solid skyblue;
      outline: none;
  }
  

  

• 通過text-align-last屬性，來控制下拉框裡的文字居中,通過appearance屬性，隱藏下拉箭頭

  select {
      /* 文字間距 */
      letter-spacing: 2px;
      /* 文字居中 */
      text-align-last: center;
      appearance: none;
      /* 背景顏色 */
      background-color: #fff;
      background: linear-gradient(white, #e5e5e5);
  }
  

  

• 對於option元素，只能設定一般的字型文字樣式

  option {
      font-size: 14px;
      font-weight: bold;
      color: red;
      background-color: #adff2f;
  }
  

  只有字型文字樣式才會生效

  無法設定位置樣式、懸浮樣式

  背景顏色無法透明，透明時預設白色

  ---

  因此，要更改option的樣式，只能通過其它元素模擬來實現下拉框

  

• 其它的，在行內設定樣式size屬性和multiple屬性

  <select size=2>...</select>
  

  表示顯示兩個選項出來

  這時下拉框裡的內容被option裡的內容填充，顯示數量為兩個選項，且此時通過滾動來切換顯示

  select{
      /* 取消高度 */
      /* height:30px */
      /* 文字垂直方向居中對齊 */
     vertical-align: middle;
  }
  

  

  <select multiple>...</select>
  

  可以搭配size屬性，設定具體的顯示數量

  

  ---

以上內容或有差錯，望海涵！