跨瀏覽器的垂直輸入範圍滑塊使用自定義樣式

Question

滑塊CSS在Firefox的作​​品根據需要

不在Chrome

問題闡述

Here's a sample工作，這是得到期望的結果，如果與Firefox瀏覽，但如果使用Chrome觀察不。

• 關鍵的問題是，我似乎需要有這樣的瀏覽器：-webkit-appearance: slider-vertical; - 試樣品中取出，並查看它在瀏覽器和輸入範圍爲水平而不是垂直
• 但隨後的結果，我無法掩飾我已經與自定義樣式取代了原生的視覺效果，與-webkit-appearance: none;
• 我無法隱藏它們，因爲它是相同的屬性，即-webkit-appearance不能在我們的非量子CSS都slider-vertical和none（參見下[type='range']選擇器）

Answer 1

如this answer所示，使用變換使滑塊垂直，因此您可以將-webkit-appearance設置爲none。