使用自定义 CSS 的垂直范围输入，它也尊重父级的尺寸

Question

我正在尝试创建一个垂直移动而不是水平移动的input[type=range] 元素。我还想用我自己的 CSS 自定义它。另外，我希望它可以缩放以适应其父级的尺寸，而不必显式声明其尺寸。这在任何现代浏览器中都可能吗？

我的理解：

• 我可以使用-webkit-appearance: none 将自定义CSS 应用到input[type=range]
• 我可以使用-webkit-appearance: slider-vertical 来创建一个垂直滑块，该滑块具有一个准确反映其位置的盒子模型。
• 我可以使用transform: rotate(90deg) 创建一个带有盒子模型的垂直滑块，该滑块没有准确反映其位置。

因此，使用当今的浏览器似乎无法实现我的目标。对吗？

Here's a JSFiddle 尽我最大的努力。我能够实现三分之二的目标，但需要显式反转父级的高度/宽度并将其应用于input[type=range] 元素。

这是随附的代码：

<div class='parent'>
    <input type="range" class='vertical-range' />
</div>

<br />

<div class='parent'>
    <input type="range" class='vertical-range fixed' />
</div>

.parent {
    width: 20px;
    height: 100px;
    background-color: blue;
    margin: 50px;
}

.vertical-range {
    -webkit-appearance: none;
    transform: rotate(90deg);
    height: 100%;
    width: 100%;
    background-color: green;
    margin: 0;
}

.fixed {
    width: 100px;
    height: 20px;
    -webkit-transform-origin: 0 0;
    margin-left: 20px;
}

和here is another question I found非常相似，但由于缺乏初始说明而没有得到适当的回答

Answer 1

目前不可能：https://code.google.com/p/chromium/issues/detail?id=341071

问题 341071：无法设置垂直输入 type=range 的样式。

What steps will reproduce the problem?
1. Create input <input type="file" class="slider" >
2. Style this element with CSS: .slider{-webkit-appearance: none; background: url(image.png);}
3. Change orientation: .slider.vertical{-webkit-appearance: slider-vertical;}

What is the expected result?
Input become vertical with custom background.

What happens instead?
Input become vertical, but without custom background.