HTML垂直滑块元素

Question

希望快速 - 我的滑块元素为什么不垂直定位？我错过了什么？

谢谢！

CSS

div.CRHslider{
-webkit-appearance: slider-vertical;
    data-orientation="vertical";
}

HTML

<div id="CRHslider">
Control Rod Height
<br>
0% <input type="range" name="ControlRodHeight" min="0" max="100" value="0" 
onchange="updateCRHSlider(this.value)" class="vertical" orient="vertical"/> 100%
</div>

Answer 1

试试这个：

#CRHslider1 {
    -webkit-appearance: slider-vertical;
    data-orientation="vertical";
}

<div id="CRHslider">
  Control Rod Height
  <br>
  0% <input type="range" name="CRHslider1" id="CRHslider1" min="0" max="100" value="0" onchange="updateCRHSlider(this.value)" class="vertical" orient="vertical"/> 100%
</div>

JSFiddle：https://jsfiddle.net/david_black/3jot0pvx/

你的css不工作的原因是因为它匹配div而不是输入。