設定表單控制項樣式

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

<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: absoluteopacity: 0,而非 display: nonevisibility: 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;
}
敬上

隨堂測驗

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

如何移除表單控制項的平台原生樣式設定?

使用 revert: all;
使用 revert: appearance;
使用 appearance: none;
使用 appearance: revert;

資源