css – firefox方向垂直的HTML5输入类型范围?

前端之家收集整理的这篇文章主要介绍了css – firefox方向垂直的HTML5输入类型范围?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
想知道是否有人知道FireFox中输入类型范围的垂直方向是否可行.

我知道在Chrome和Safari中你可以做到:

-webkit-appearance: slider-vertical;

我在FireFox中尝试过类似的东西:

HTML

<input type="range" name="range" min="0" max="9" step="1" value="3" />

CSS

input[name=range] {
  width: 150px;
  height: 10px;
  -moz-transfrom: rotate(270deg);
}

尽管这确实产生了我想要的效果,但是范围输入默认指针的方向仍需要左右拖动以使其改变,而不是按预期上下移动.

这是一个Example,必须在FireFox中查看.

关于这个主题的任何新的和令人兴奋的信息将非常感谢,谢谢!

@H_301_22@

解决方法

看起来在最近的Firefox更新中,他们已经解决了这个问题.这是更新的 fiddle
<input type="range" name="range" min="0" max="9" step="1" value="3" />

和CSS

input[name=range] {
    position:relative;
    top: 100px;
    width: 150px;
    height: 10px;
    border: 0

    -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
            transform: rotate(270deg);
}
@H_301_22@ @H_301_22@ 原文链接:https://www.f2er.com/css/215771.html

猜你在找的CSS相关文章