Google Chrome vertical <input type ="range"/>

Question

在歌剧中,我可以做到以下几点

<style>
#range{
 width: 20px;
 heigth: 300px;
}
</style>

<input type="range" id="range" />

它将呈现一个垂直滑块.但是,这似乎不适用于chrome.有没有办法可以做到这一点？(我不是在寻找任何jQuery滑块或任何东西)

Answer 1

似乎Chromium还没有实现对此的支持:

请参阅:http://www.chromium.org/developers/web-platform-status/forms

还不可用

• 本地化
• 用于颜色,日期,日期时间,日期时间 - 本地,月份,时间和周类型的专用UI
• 自动切换到垂直范围
• 价值清理算法
• datalist元素,列表属性和list/selectedOption属性

编辑: Vuurwerk 表示实际上可以使用该-webkit-appearance: slider-vertical属性更改演示文稿.虽然这确实将它转换为垂直滑块,但我不建议这样做,因为它会破坏你的布局并且看起来不太漂亮:例如.

如果您真的想要一个垂直滑块,请使用JavaScript解决方案.<input type="range" />无论如何,支持是非常基本的,所以你可能会有一个优雅的降级或渐进增强方法.

Answer 2

-webkit-appearance:slider-vertical;

Answer 3

也许用 css 转换？

-webkit-transform: rotate(90);

另一种解决方案可能是使用 jQuery UI 中的滑块模块。
http://jqueryui.com/demos/slider/#slider-vertical