設定表單控制項樣式

在本單元中，您將瞭解如何設定表單控制項的樣式，以及如何選用符合其他網站樣式的樣式。

協助使用者選取所需選項

<select> 元素

<select> 元素的預設樣式看起來不美觀，且各瀏覽器的外觀也不一致。

首先是變更箭頭。

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

如要移除 <select> 元素的預設箭頭，請按照下列步驟操作： 請使用 CSS appearance 資源。 如要顯示選擇的箭頭，請將箭頭定義為 background。

您也應將 font-size 變更為至少 1rem (在大多數瀏覽器中，<select> 元素的預設值為 16 像素)。 否則當焦點位在表單控制項時，iOS Safari 就不會縮放網頁。

當然，您也可以按照品牌顏色變更元素顏色。 新增一些間距、:hover 和 :focus 樣式後， 不同瀏覽器之間的 <select> 元素外觀現在保持一致。

請觀看以下示範： 設定 2019 年精選風格

<option> 元素會怎麼樣？<option> 元素是所謂的 其表示法超出 CSS 範圍的 取代元素。 截至本文撰寫時，您無法設定 <option> 元素的樣式。

核取方塊和圓形按鈕

<input type="checkbox"> 和 <input type="radio"> 的外觀會因瀏覽器而異。

如要查看差異，請在各種瀏覽器上開啟示範。 以下說明如何確保核取方塊和圓形按鈕與品牌相符，且在跨瀏覽器上的外觀。

過去，開發人員無法直接設定 <input type="checkbox"> 和 <input type="radio"> 控制項的樣式。 現在可以透過虛擬元素設定核取方塊和圓形按鈕的樣式。 或者，您可以使用下列取代技巧，為這些元素建立自訂樣式。

首先，隱藏預設核取方塊和圓形按鈕。

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

請務必搭配使用 position: absolute 與 opacity: 0，而非 display: none 或 visibility: hidden 讓控制項只隱藏。這樣可確保瀏覽器的 無障礙功能樹狀結構。請注意，您可能需要更多樣式，才能確保視覺元素隱藏起來。 表單控制項會維持在「頂端」位置取代元素這樣做可確保滑鼠指標懸停在上述任一處 元素、螢幕閱讀器，或使用觸控裝置搭配螢幕閱讀器時，介面會隱藏視覺元素。 如果輕觸探索，可偵測到的焦點位置，而螢幕閱讀器的可見焦點指標通常會顯示在控制項位置 會在畫面上顯示。

您可以選擇不同的選項，以顯示自訂核取方塊和圓形按鈕。 使用 ::before CSS 虛擬元素和 CSS background 屬性，或使用內嵌 SVG 圖片。

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS 有許多可能性，可確保核取方塊和圓形按鈕符合品牌樣式。

進一步瞭解 樣式 <input type="checkbox"> 和 <input type="radio"> 和自訂核取方塊樣式。

如何使用網站顏色來設定表單控制項

想要使用一行程式碼將網站樣式加進表單控制項嗎？ 你可以使用 accent-color CSS 屬性來達到此目的。

checkbox {
  accent-color: orange;
}

隨堂測驗

測試您對樣式設定控制項的瞭解程度

資源

• 強調色
• 設定 <select> 元素的樣式
• 樣式化表單控制項的無障礙功能
• 開啟 UI