設定表單控制項樣式

在本單元中，您將學習如何設定表單控制項的樣式，以及如何與其他網站樣式保持一致。

協助使用者選取選項

<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。

同時，也應將 <select> 元素的 font-size 變更為至少 1rem (在多數瀏覽器上，預設值是 16 像素)。 這樣一來，當焦點位在表單控制項時，iOS Safari 就會無法縮放網頁。

當然，您也可以配合品牌顏色變更元素顏色。 加入更多間距、:hover 和 :focus 樣式後，<select> 元素的外觀現在會在瀏覽器之間保持一致。

請看以下示範的「Styling a Select With It’s 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