在WebIOPi中使用HTML时无法正常工作

时间:2017-02-06 17:05:24

标签: html css webiopi

我通过框架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中看起来相同。

感谢您给我的任何答案。

1 个答案:

答案 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>