如何使用兩種不同的顏色（綠色和灰色）來設定 HTML5 範圍輸入的樣式？

使用不同顏色設計HTML5 範圍輸入

問題：

要實現視覺上吸引人的範圍輸入，其中吸引人左側一側是綠色，右側是灰色。

解決方案：

實現此效果需要特定於瀏覽器的樣式。雖然純 CSS 解決方案是可能的，但它們會根據目標瀏覽器而有所不同。

Chrome 的 CSS 解：

• 隱藏輸入[範圍]的溢位。
• 使用所需的左側顏色填滿拇指前面的空間

IE 的CSS 解：

• 使用內建::-ms-fill-lower 偽元素來設定左側顏色。

CSS 解決方案Firefox:

• 使用內建 ::-moz-range-progress 偽元素設定左側顏色。

範例程式碼：

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

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

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

此CSS程式碼確保範圍輸入的左邊是綠色，右邊保持灰色，提供所需的視覺效果。

以上是如何使用兩種不同的顏色（綠色和灰色）來設定 HTML5 範圍輸入的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！