如何在不同瀏覽器中自訂 HTML5 範圍輸入滑桿的外觀？

為 WebKit 著色 HTML5 範圍輸入滑桿

基於 WebKit 的瀏覽器顯示具有一致外觀的本機範圍輸入滑桿。但是，添加自訂樣式來修改此滑桿的外觀可能具有挑戰性。

Chrome：

• 溢位技巧： 隱藏透過設定溢位來預設滑桿：隱藏在輸入上。
• 陰影效果： 建立陰影效果，用所需的顏色填滿拇指左側的空間。

對於IE 和Firefox（原生支援）：

• ::-ms-fill-lower: 在IE中使用這個偽元素來填滿拇指下方的區域。
• ::-moz-range-progress: 在 Firefox 中使用此偽元素填滿拇指前面的區域。

CSS 程式碼實作：

HTML範例：

以上是如何在不同瀏覽器中自訂 HTML5 範圍輸入滑桿的外觀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！