我通过框架WebIOPi在HTML中创建了一个用于我的Raspberry Pi 2的控件。当我介绍一个类型范围输入时,它在HTML中看起来没问题,但是当我将它加载到我的Raspberry Pi并查看它的外观时,它并不好。
This is how the range input looks in the HTML
And this is how it shows in my local IP address when I upload it
作为一个注释,我没有忘记上传CSS修改并将其包含在HTML文件的标题中。
我按以下方式添加了输入:
<input id="volSlider" class="asrange" type="range" min="0" max="30"/>
和CSS:
input[type=range] {
width: 10px; /* Specific width is required for Firefox. */
height: 100%;
background: transparent; /* Otherwise white in Chrome */
/*transform: rotate(-90deg);*/
-webkit-appearance: slider-vertical;
vertical-align: middle;
text-align:center;
}
在Firefox,Chrome和Edge中看起来相同。
感谢您给我的任何答案。
答案 0 :(得分:0)
我认为你的案例中的问题是基于百分比的高度。将其更改为像素,并按照this great answer的其他提示进行操作。
input[type=range] {
width: 10px;
/* Specific width is required for Firefox. */
height: 100px;
background: transparent;
/* Otherwise white in Chrome */
/*transform: rotate(-90deg);*/
-webkit-appearance: slider-vertical;
vertical-align: middle;
text-align: center;
writing-mode: bt-lr;
}
<div>
<input id="volSlider" class="asrange" type="range" min="0" max="30" orient="vertical" />
</div>