Html 表單元素 CSS 設計

數字型 RANGE 滑動條

<input type="range" step="1" max="100" min="0" value="50" />

預設的基本樣式 Style

margin:2px 2px 2px 2px; padding:0px 0px 0px 0px;

使用 CSS3 appearance 屬性改變外觀

appearance 顯示 Html 元素的方式，例如將 <div> 顯示成一個按鈕 object.style.appearance="button"，這裡使用 appearance:none 為支持不同瀏覽器所以保持 WebKit, Gecko 的屬性。Safari 和 Chrome 使用替代的 -webkit-appearance 屬性、Firefox 使用替代的 -moz-appearance 屬性。

input{margin:8px 0px;padding:0px;width:100%;height:40px;
  background-color:#fff;-webkit-appearance:none;}
input::-webkit-slider-runnable-track{height:5px;background:#e3e6e9;border:none;border-radius:2px;}
input::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:30px;width:30px;
  border-radius:50%;background:#6e8091;border:3px solid #fff;margin-top:-13px;}

input::-moz-range-track{background-color:#e3e6e9;height:5px;border-radius:2px;border:none;}
input::-moz-range-progress{background-color:#ccc;height:5px;border-radius:2px;border:none;}
input::-moz-range-thumb{width:30px;height:30px;background:#6e8091;
  border-radius:50%;border:3px solid #fff;}

CSS 前綴屬性 -webkit 主要用於 Chrome、Edge、Safari 等基於 WebKit 的瀏覽器、-moz 用於 Mozilla Firefox 等基於 Gecko 採用了 MPL (Mozilla Public License) 開源協議的瀏覽器，自由、開源、詳細的軟件許可證，1998 年初 Netscape 的 Mozilla 為其開源軟件項目設計的軟件許可證。表示該屬性或選擇器只適用於某個瀏覽器或瀏覽器引擎。

自定義 <datalist> 下拉清單

可以預先自定義 <option> 元素來出現下拉清單「點兩下」，CSS 可以將 <label> 及 <input> 設置為相同的 CSS 屬性保持對齊但是下拉清單 <datalist> 則無法控制，且不同瀏覽器顯示的結果不同，以下的 <option> 以英文、中文不同排列 value 提供您測試。元素表示其它表單控件可選值，HTML 表單元素 DOM 介面為 HTMLDataListElement。

<label for="flowers-name-choice">選擇花卉名稱</label>
<input list="flowers-name-checklist" id="flowers-name-choice" name="flowers-name-choice" />

<datalist id="flowers-name-checklist">
  <option value="Apple Blossom">Apple Blossom</option>
  <option value="Balsam">Balsam</option>
  <option value="Cactus">Cactus</option>
  <option value="菊花">Chrysanthemum</option>
  <option value="水仙花">Daffodil</option>
  <option value="曇花">Epiphyllum</option>
  <option value="蝴蝶花">Fringed Iris</option>
  <option value="Magnolia">木蘭花</option>
  <option value="Phalaenopsis">蝴蝶蘭</option>
  <option value="Sunflower">向日葵</option>
</datalist>

label{width:120px;height:42px;padding:1px 2px;
  font-size:18px;line-height:42px;text-align:center;
  color:#fff;background-color:#3e7cf0;
  display:inline-block;box-sizing:border-box;}

input{width:200px;height:42px;line-height:42px;
  padding:1px 2px;font-size:18px;
  background-color:#fff;border:2px solid #3e7cf0;
  box-sizing:border-box;}
input:focus{outline:0;background-color:#ffffe0;}

checkbox, radio 選擇項目 Switch Button

Html <input> 類型 Radio 單選及 Checkbox 複選的外觀以 CSS 定義。

input[type=checkbox] {
  width:52px;
  height:24px;
  border-radius:11px;
  background-color:#c3c6c9;
  position:relative;
  display:block;
  cursor:pointer;
  appearance:none;
}
input[type=checkbox]:before {
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:16px;
  height:16px;
  background-color:#fff;
  display:block;
  border-radius:50%;
  transition: all .15s ease;
}
input[type=checkbox]:checked {
  background-color:#0099ff;
}
input[type=checkbox]:checked:before {
  left:32px;
}
input[type=checkbox]:after {
  content:"關閉";
  font-size:18px;
  position:absolute;
  top:0px;
  left:60px;
  white-space:nowrap;
}
input[type=checkbox]:checked:after {
  content:"開啟";
}

input[type=checkbox] 主體使用 appearance:none; 取消瀏覽器預設元素外觀。
input[type=checkbox]:before 製作開關 border-radius:50% 產生圓形 transition 滑動效果。
input[type=checkbox]:checked:before 這裡是判斷 :checked 為當選擇時 left:32px 移動圓形。
input[type=checkbox]:after 以及 :checked:after 是文字的描述。

textarea resizing 調整大小功能

當前瀏覽器提供 <textarea> 右下角會有個小三角，拖曳時可以調整大小，可方便讓瀏覽者依文字內容來變化尺寸，但也有可能因此改變了版面架構。再以 min-width, max-width, min-height, max-height 限制拖曳範圍。

textarea{resize:both;}

textarea{resize:vertical;}   /* 只可上下 */
textarea{resize:horizontal;} /* 只可左右 */

關閉 <textarea> 調整大小功能

textarea{resize:none;}

CSS 設置 <textarea> 時常有預設字型未依照父元素，以及 rows="5" cols="20" 不容易控制尺寸大小，建議使用 CSS 來規範。常會使用的 CSS 屬性。

textarea{width:100%;height:100px;margin:0px;padding:5px;border:2px solid #3e7cf0;
  resize:vertical;
  font-family:"微軟正黑體",sans-serif;box-sizing:border-box;}

當 <textarea> 輸入內容時出現的框，用於提示當前位置，如果想取消或自訂樣式時使用 CSS 關閉。

textarea:focus{outline:0;background-color:#ffffe0;}

文字在 <textarea> 出現拼字檢查 spellcheck 的底線。設定 spellcheck 屬性來控制拼字檢查。
可以即時檢查單字是否錯誤，如果不需要可以設置關閉。

<textarea spellcheck="false"></textarea>

使用 JavaScript 控制 <textarea> 內容，例如清除已經輸入的文字。

document.getElementById("TEXTAREA").value = "";

在 Html div 標籤使用 resize

滑鼠於 <div> 拖曳時可以調整大小，第二 CSS 行為容器的尺寸設置。

div{overflow-x:hidden;overflow-y:hidden;resize:horizontal;}

div{min-width:200px;max-width:900px;width:900px;height:200px;}

行動裝置、虛擬鍵盤的顯示方式

行動裝置 Html input 元素 <input> 類型用於「行動裝置」輸入時虛擬鍵盤的顯示方式。

<input type="text" />

<input type="number" />

<input type="email" />

<input type="url" />

搜索輸入框類型。當開始輸入文字時，右邊會出現 ✖ 可以刪除內容。目前 Firefox 瀏覽器不支持。

<input type="search" />

<input type="color" />