3.24 表單樣式

textarea 多行文字框

HTML

<textarea>這是內容</textarea>

CSS

textarea{
  resize: both;
}

結果如下：

resize 可選的值有：

• both：這是預設。使用者可改變 textarea 欄位的寬高。

• horizontal：使用者可水平將 textarea 欄位變寬。

• vertical：使用者可垂直將 textarea 欄位變高。

• none：使用者無法改變 textarea 欄位的寬高。

例：

練習：checkbox

此例同樣也可運用在 radio button。

未勾選狀態的圖片網址：https://alldata.sgp1.digitaloceanspaces.com/images/unchecked-checkbox-50.png

已勾選狀態的圖片網址：https://alldata.sgp1.digitaloceanspaces.com/images/checked-checkbox-50.png

提供 html：

<div class="custom_checkbox">
  <input type="checkbox" id="custom_checkbox" value="2">
  <label for="custom_checkbox" id="the_label">換圖的 checkbox</label>
</div>

參考作法：

練習：select 下拉選單

• 箭頭網址：https://img.icons8.com/android/24/000000/down.png

• 設定 appearance 為 none。

給定 html：

<select class="custom_select">
  <option>選項一</option>
  <option>選項二</option>
  <option>選項三</option>
</select>

css 的 appearance 設定：

select.custom_select{
  appearance: none;
}

結果示意：

參考作法：