0

我通过 WebIOPi 框架在我的 Raspberry Pi 2 中制作了一个 HTML 控件。当我引入类型范围输入时，它在 HTML 中看起来不错，但是当我将其 ulpload 到我的 Raspberry Pi 并查看它的外观时，它并不好。

这是范围输入在 HTML 中的外观

这就是我上传它时它在我的本地 IP 地址中的显示方式

作为说明，我没有忘记上传 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 中的显示方式相同。

谢谢你能给我的任何答案。

4

1 回答 1

0

我相信你的问题是基于百分比的高度。将其更改为像素并遵循一些其他提示形成这个很好的答案。

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>

于 2017-02-06T19:31:34.090 回答