如何自訂 HTML5 範圍輸入類型以使其看起來像進度列？

使用CSS 自訂HTML5 輸入範圍類型

HTML5 範圍輸入類型是一個有用的元素，允許使用者在指定範圍內選擇一個值範圍。然而，它的預設外觀可能並不總是與您的 Web 應用程式所需的外觀和感覺相符。在本文中，我們將探討如何自訂範圍輸入類型的美觀性以增強使用者體驗。

您的問題圍繞著將範圍輸入類型修改為類似於進度條而展開。由於瀏覽器特定的行為，嘗試應用標準 CSS 屬性可能會被證明是無效的。

要成功自訂範圍輸入類型，我們需要利用覆蓋預設外觀的特定 CSS 屬性。以下是範例：

<code class="css">input[type='range'] {
    -webkit-appearance: none !important;
    background: red;
    height: 7px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: blue;
    height: 10px;
    width: 10px;
}</code>

上面的CSS 將更改範圍輸入類型的以下方面：

• 背景顏色： 的背景顏色範圍指示器變為紅色。
• 高度：範圍指示器的高度減少為 7 像素。
• 滑桿拇指： 的外觀滑桿拇指被自訂為 10px x 10px 藍色圓圈。

透過利用特定於瀏覽器的偽類（如 ::-webkit-slider-thumb），我們可以定位範圍輸入的特定元素進一步鍵入和自訂其外觀。這種方法可以讓您實現類似進度條的外觀或任何其他所需的美感。

以上是如何自訂 HTML5 範圍輸入類型以使其看起來像進度列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！