如何使用 CSS 將標準 HTML5 範圍輸入轉換為自訂進度條？

使用CSS 自訂HTML5 範圍輸入

HTML5 範圍輸入類型提供了多種使用者輸入方式，但其預設外觀可能不始終符合所需的美學。本文深入探討了使用 CSS 將其呈現方式客製化為類似進度條的設計所需的具體技術。

儘管嘗試使用傳統 CSS 屬性修改其外觀，但這種努力可能會被證明是無效的。為了克服這個障礙，必須覆蓋 Web 瀏覽器應用程式的預設樣式。這可以透過將範圍輸入本身及其拇指元件的 -webkit-appearance 屬性明確設定為 none 來實現。

自訂範圍輸入：

至修改範圍輸入的外觀，套用下列CSS規則：

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

此程式碼將背景顏色設定為紅色並將高度調整為7像素，給它一個進度條的錯覺。

自訂範圍縮圖：

接下來，要自訂範圍縮圖，請使用以下CSS 規則：

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

這些樣式指定藍色背景，將高度和寬度設為10 像素，並確保拇指的外觀與進度條的其餘部分相符。

透過應用這些 CSS 規則，您可以成功地將標準範圍輸入轉換為自訂進度類似條形的 UI 元素，增強其美感並使其符合特定的設計要求。

以上是如何使用 CSS 將標準 HTML5 範圍輸入轉換為自訂進度條？的詳細內容。更多資訊請關注PHP中文網其他相關文章！