填寫範圍控制跨瀏覽器的較低部分

例如，請查看this fiddle（不在IE中）。填寫範圍控制跨瀏覽器的較低部分

（可以在this link看到的控制的描述。）

她使用-MS - 填充 - 和低-ms - 填充 - 上，以控制在拇指的任一側上的顏色，如這樣的：

input[type=range]::-ms-track { 
    width: 300px; 
    height: 5px; 

    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ 
background: transparent; 

    /*leave room for the larger thumb to overflow with a transparent border */ 
    border-color: transparent; 
    border-width: 6px 0; 

    /*remove default tick marks*/ 
    color: transparent; 
} 
input[type=range]::-ms-fill-lower { 
    background: #777; 
    border-radius: 10px; 
} 
input[type=range]::-ms-fill-upper { 
    background: #ddd; 
    border-radius: 10px; 
} 
input[type=range]::-ms-thumb { 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: goldenrod; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: #888; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: #ccc; 
}

The result (in IE) http://brennaobrien.com/assets/blog/custom-slider-ie-updated.png

然而，據我所知道的，... ::-ms- ...僞元素只能在IE工作。在Chrome中，上面的代碼似乎沒有效果。在Chrome中，我剛剛結束了與此：

The result (in Chrome) http://brennaobrien.com/assets/blog/custom-slider.png

我能做些什麼來實現這一效果的跨瀏覽器？

謝謝！

來源

2015-01-07 Andrew LaPrise

**這些僞元素可能不支持IE以外的地方。**所以你不能做任何事情。 –

謝謝，@Paulie_D。我的目標不一定是使用-ms-fill-lower來達到效果。這只是爲了完成工作。是否沒有我可以使用的其他元素？ –

不是我所知道的。如果有的話，它可能需要JS。以這種方式來看 - 它是跨瀏覽器，只是IE用戶得到更多東西。其他瀏覽器的用戶永遠不會知道。 –

可以使用漸變達到這樣的效果，請看這裏：http://codepen.io/ryanttb/pen/fHyEJ 例如：

input::-moz-range-track{ 
    background: linear-gradient(90deg,black 50%,grey 50%); 
}

當然，你需要的js以及改變百分比值。

來源

2016-03-20 22:13:58 bladekp

對於其他人的發現 - 如果您不想要漸變的漸變效果，那麼使用HTML5標準background-size是一個不錯的選擇。我已經在教程的https://www.w3schools.com/howto/howto_js_rangeslider.asp周圍構建了我的範圍。

所以我的解決辦法是在CSS：

.slidecontainer { 
    display:inline-block; 
    vertical-align:middle; 
    width: 60%; 
    position:relative; 
    margin:5px 0; 
    background:url('/images/cyan_back.png') no-repeat left top; 
    background-size:0 14px; 
    border-radius:7px; 
}

使用jQuery

然後：

$('.slidecontainer').css('background-size',$(this).val()+'% 14px');

我相信這也是更多的跨瀏覽器友好。

來源

2018-03-06 15:31:24 Antony

填寫範圍控制跨瀏覽器的較低部分

回答

相關問題