---

關(guān)于表單樣式

【注意】：以下樣式只在Chrome瀏覽器下設(shè)置成功，其它瀏覽器可能有所差異，需要單獨(dú)設(shè)置、自行調(diào)整

一、文本框樣式

• 正常情況下，普通文本框的樣式如下（未聚焦和聚焦?fàn)顟B(tài)）

  

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

  input[type=text] {/* 通過width/height設(shè)置寬高 */width: 100px;height: 30px;/* 設(shè)置字體樣式 */font-size: 18px;font-weight: bold;/* 設(shè)置內(nèi)邊距 */padding: 0 5px;
  }
  

  

• 然后，最重要的應(yīng)該是邊框樣式的設(shè)置，也是我們非常熟悉的border屬性

  PS：以下樣式的設(shè)置是在上面樣式設(shè)置的基礎(chǔ)上進(jìn)行的

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

  【注意】：如果不設(shè)置邊框樣式，就會(huì)出現(xiàn)下面圖片中第一種情況，即左上部分的顏色要暗一點(diǎn)

  

• 其次，當(dāng)聚焦時(shí)，文本框周圍會(huì)有一圈輪廓，我們可以通過outline屬性來控制

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

  解析：

  outline-offset：即輪廓對文本框的偏移量，可以為負(fù)數(shù)，負(fù)數(shù)即顯示在文本框內(nèi)部

  outline-color：輪廓顏色

  outline-width：輪廓寬度

  outline-style：輪廓樣式

  【注意】：如果設(shè)置了輪廓樣式，則輪廓會(huì)常顯；不設(shè)置樣式，則默認(rèn)在聚焦時(shí)才顯示，默認(rèn)樣式為直線，輪廓無法圓角

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

  

• 接下來，通過:focus偽類，來控制文本框聚焦時(shí)的樣式

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

  添加聚焦時(shí)的樣式，如陰影，輪廓樣式等等

  

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

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

  

---

二、選框樣式

結(jié)合<label>標(biāo)簽，為綁定的選框設(shè)置樣式

• 前提條件：標(biāo)簽的for屬性要與選框的id屬性相同，即進(jìn)行了綁定

• 實(shí)現(xiàn)思路：

  • 隱藏選框，再為<label>標(biāo)簽添加::before偽類或者::after偽類
  • 通過這個(gè)偽類設(shè)置新的樣式
  • 結(jié)合選框的:checked偽類屬性，設(shè)置選中狀態(tài)時(shí)的樣式

• 實(shí)現(xiàn)過程：（以單選框?yàn)槔?#xff09;

  • 隱藏單選框

    input[type="radio"] {/* 直接設(shè)置大小為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;
    }

• 選中狀態(tài)

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

  

• 或者直接給<label>標(biāo)簽設(shè)置樣式，再結(jié)合:checked偽類屬性，設(shè)置選中樣式

  

三、按鈕樣式

• 先設(shè)置基本樣式，用常用的屬性就可以設(shè)置

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

  

• 主要是邊框樣式，和文本框樣式的邊框設(shè)置一樣，使用border屬性，更改默認(rèn)的邊框樣式，使用outline屬性，更改默認(rèn)輪廓樣式

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

  

其它的還可以通過偽類屬性，設(shè)置點(diǎn)擊時(shí)的樣式:active，聚焦時(shí)的樣式:focus，等等

四、下拉框樣式

• 基本樣式還是可以用已知的屬性來設(shè)置，對于邊框仍然采用border+outline屬性來設(shè)置

  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元素，只能設(shè)置一般的字體文本樣式

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

  只有字體文本樣式才會(huì)生效

  無法設(shè)置位置樣式、懸浮樣式

  背景顏色無法透明，透明時(shí)默認(rèn)白色

  ---

  因此，要更改option的樣式，只能通過其它元素模擬來實(shí)現(xiàn)下拉框

  

• 其它的，在行內(nèi)設(shè)置樣式size屬性和multiple屬性

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

  表示顯示兩個(gè)選項(xiàng)出來

  這時(shí)下拉框里的內(nèi)容被option里的內(nèi)容填充，顯示數(shù)量為兩個(gè)選項(xiàng)，且此時(shí)通過滾動(dòng)來切換顯示

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

  

  <select multiple>...</select>
  

  可以搭配size屬性，設(shè)置具體的顯示數(shù)量

  

  ---

鄙人拙見，不足之處，萬望海涵！