我要成為切版魔法師 #4 - HTML 表單樣式變變變

HTML 表單元素像是：

• <input>
• <button>
• <select>
• <textarea>

要改變表單元素的樣式其實相當麻煩，有些樣式還不能更改，這篇就來探討如何把它們改成喜歡的模樣吧。

<input>

• 改變提示字的顏色

input::placeholder {
  　　color: blue;
}​

• 改變輸入框與內容的距離，以及外框顏色

input {
  　　padding: 8px 12px;
  　　border: solid 1px #ccc;
}

• 改變聚焦在輸入框時的外框顏色

input {
  　　outline: none;
}

input:focus {
  　　border: solid 1px blue;
}

<button>

• 取消按鈕的立體外框，改變背景色

button {
  　　background: #000;
  　　border: none;
}

<select>

想要替換右方的下拉選單 icon，可以加入以下語法：

select{
　　/* 清除預設的 icon */
　　appearence: none;

　　/* 加入自定義的 icon 圖片 */
　　background-image: url(icon.png);
　　background-repeat: no-repeat;
　　background-size: 16px 12px;
　　background-position: right 20px center;
}

目前點擊 <select> 後的 <option> 預設樣式都是不能做修改的，如果要完全自定義樣式的話，就只能使用 div 設計，再手動加入 JS 語法觸發。或是使用套件定義好的樣式會更加快速。

<textarea>

• textarea 預設可拖曳右下角，伸縮水平和垂直方向的範圍，如果要改變這個設定，可以加入 resize 語法來達到自己想要的效果：

textarea {
  /* 預設，可以水平、垂直方向拉伸 */
  resize: both;
  
  /* 取消伸縮 */
  resize: none;
  
  /* 僅能水平方向拉伸 */
  resize: vertical;
  
  /* 僅能垂直方向拉伸 */
  resize: horizional;
}

參考資料

• MDN - resize