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;
}
