如何仅使用CSS自定义HTML5输入范围滑块垂直方向？

Question

我想要定制一个 html5 的 input[range] 在垂直方向上的外观。

希望避免使用 transform:rotate 这样的 CSS 3 指令，因为它会使 UI 布局变得复杂。

在我的环境中，Webkit css 属性可以被识别，其他厂商则无用。

这种自定义对于水平默认滑块效果非常好，但是对于垂直滑块效果不好，你可以在这里查看：

jsFiddle ：http://jsfiddle.net/QU5VD/1/

否则，这是代码：

HTML

<input type="range" class="vHorizon" />

<input type="range" class="vVertical" />

CSS

input[type="range"].vHorizon {
   -webkit-appearance: none;
   background-color: pink;
   width: 200px;
   height:10px;
}
input[type="range"].vVertical {
   -webkit-appearance: slider-vertical;
   background-color: pink;
   width: 10px;
   height:200px;
}
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: red;
   width: 20px;
   height: 20px;
}

- medCoder

---

我知道的一个技巧是在水平方向上使用 transform: rotate(90)。但这是一个不太正规的技巧，我不建议使用它。但还是值得了解一下。 - Sourabh

谢谢，是的，有几个原因，这不是一个好的技巧（需要注意位置，会让CPU工作（嵌入式软件））。 - medCoder

嗨，我遇到了同样的问题，想知道是否有人找到了更好的解决方案。 使用旋转会完全失去对滑块位置的控制 :( - Massimo Callegari

同样的问题也出现在transform:rotate上。位置会根据浏览器而改变。 - estellechvl

Answer 1

******更新的答案****

如果我理解正确，您想让您的垂直外观像水平外观一样？ 如果是这样：

    input[type=range].vVertical {
    -webkit-appearance: none;
    background-color: green;
    width: 200px;
    height:10px;

      -webkit-transform:rotate(90deg);       
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    z-index: 0;
}
input[type=range].vHorizon {
    -webkit-appearance: none;
    background-color: pink;
    height: 10px;
    width:200px;

}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: red;
    width: 20px;
    height: 20px;
}

fiddle <--UPDATED

- cube

---

你的技巧是有效的，但正如我之前所说并且我应该在我的问题中询问，我想避免使用CSS变换解决方法。它会带来位置和其他问题。 - medCoder