在本單元中,您將瞭解如何設定表單控制項的樣式,以及如何選用符合其他網站樣式的樣式。
協助使用者選取所需選項
<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;
}
隨堂測驗
測試您對樣式設定控制項的瞭解程度
如何移除表單控制項的平台原生樣式設定?
revert: all;
。revert: appearance;
。appearance: none;
。appearance: revert;
。