如何使用 CSS 將 HTML5 範圍輸入的每一側設定為不同顏色？

將HTML5 範圍輸入的樣式設定為兩側不同的顏色

將HTML5 範圍輸入的樣式設定為左側和右邊側具有對比色共同的請求。當使用者與滑桿互動時，顏色會動態變化，從而提供有關輸入值的視覺回饋。在純 CSS 中實現這種效果似乎是一個挑戰，但這是可能的。

對於 Chrome，訣竅在於隱藏輸入中的溢出並使用框陰影填充剩餘部分具有所需顏色的空間。此技術有效地使用自訂顏色繪製滑桿的左側。

對於IE 和Firefox，我們可以利用內建CSS 偽元素：

• 在IE 中：::-ms-fill -lower 可讓您設定滑桿下部的樣式，啟用綠色顏色。
• 在 Firefox 中：::-moz-range-progress 為您提供類似的控制，讓您定義滑桿填滿部分的顏色。

要說明CSS 解決方案，請參考以下程式碼：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background-color: #9a905d;
  }
  
  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }
  
  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    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;
}

使用此CSS 程式碼，您可以設定HTML5 樣式範圍輸入以在滑桿兩側顯示不同的顏色，為您的Web 應用程式創建具有視覺吸引力且用戶友好的介面。

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