【CSS】關于表單樣式

• 關于表單樣式
• • 一、文本框樣式
  • 二、選框樣式
  • 三、按鈕樣式
  • 四、下拉框樣式

---

關于表單樣式

【注意】：以下樣式只在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屬性，設置具體的顯示數量

  ---

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

總結

以上是生活随笔為你收集整理的【CSS】关于表单样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。