如何為 HTML5 範圍輸入的每一側設定不同顏色的樣式？

為HTML5 範圍輸入每側設定不同的顏色

在HTML5 範圍輸入的滑桿之前和之後實現不同的顏色需要瀏覽器-具體的

Chrome：

• 透過設定輸入元素上的溢位：隱藏和寬度來隱藏預設滑桿。
• 填充區域到拇指左側並具有所需的背景顏色。
• 建立一個自訂滑桿拇指並將其放置在右側 80px 處拇指的自然位置。
• 確保自訂拇指大於輸入的寬度，以完全覆蓋預設拇指。

IE:

• 利用 ::-ms-fill-lower 偽元素將背景顏色設定為左側拇指。
• 使用 ::-ms-fill-upper 設定拇指右側的背景顏色。

Firefox:

• 利用 ::-moz-range-progress 偽元素設定左邊的背景顏色拇指。
• 使用 ::-moz-range-track 設定軌道的背景顏色。

範例程式碼：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    color: #13bba4;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #43e5f7;
  }
}

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

<input type="range" />

以上是如何為 HTML5 範圍輸入的每一側設定不同顏色的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！