如何增加HTML5输入类型范围的长度/大小

Question

<!DOCTYPE html>
<html>
<body>
<form action="/" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>
</body>
</html>

我厌倦了属性

size="100px"

和

width="100px"

，但它们不起作用。我想知道是否可以更改 HTML5 范围输入的长度/大小：

Answer 1

修改宽度对我来说效果很好https://jsfiddle.net/j08691/592ydrk2/。请注意，您需要使用 CSS，而不是旧的、已弃用的属性。

input[type="range"] {
  width:400px;
}

<form action="/" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

Answer 2

通过CSS设置宽度

<input type="range" style="width: 500px;" value=10>

Answer 3

size

属性不适用于类型为

input

的

range

元素。但是，您可以使用 CSS 轻松放大或缩小它：

input[type=range] {
  width: 75%;
}

<!DOCTYPE html>
<html>
<body>
<form action="/" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>
</body>
</html>

Answer 4

宽度属性效果很好

input[type="range"]{
  width:500px;
}

<!DOCTYPE html>
<html>
<body>
<form action="/" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>
</body>
</html>

input[type="range"]{
width:500px;
}

Answer 5

如果不使用 CSS，则无法更改 HTML5 范围输入的长度/大小。

您可以使用的唯一属性是值、最小值、最大值和步长。但这些都不能满足您的需要。

在 This 上找到“设置滑块样式”以了解更多信息

Answer 6

我遇到了同样的问题，尝试了不同的选择器、属性。没有一个起作用。但后来我发现这篇文章解决了我的问题。基本上，您需要通过设置appearance：none来删除现有的外观，然后根据您的要求进行修改。

创建自定义范围

如何增加HTML5输入类型范围的长度/大小

问题描述投票：0回答：6

6个回答

最新问题

如何增加HTML5输入类型范围的长度/大小

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6