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