HTML 垂直 slider 元素

Question

希望快一点 - 为什么我的 slider 元素不是垂直方向？我错过了什么？

谢谢!

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 而不是输入。