我可以只使用 CSS 為 HTML5 範圍輸入設定兩種不同顏色的樣式嗎？

使用不同顏色設定HTML5 範圍輸入的樣式

問題：

問題：

是否可以設定🎜>問題：

是否可以設定樣式HTML5 範圍輸入在滑桿兩側有不同的顏色？例如，左邊是綠色，右邊是灰色？理想情況下，首選純 CSS 解決方案，相容於 WebKit 瀏覽器。

解：

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;
}

當然，用純 CSS 實現這種客製化是可行的。我們的解決方案利用特定瀏覽器的CSS 屬性來針對不同的瀏覽器：

Chrome:

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

Firefox:

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

互聯網Explorer:

<input type="range"/>

HTML 片段:此程式碼片段將建立一個左側為綠色、一個左側碼右側為灰色的範圍輸入。為了在所有主要瀏覽器中獲得完整功能，請確保包含所有提供的特定瀏覽器的程式碼區塊。

以上是我可以只使用 CSS 為 HTML5 範圍輸入設定兩種不同顏色的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！