Question

如何增加HTML5 range input的长度/大小使它更长/更大？

<!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，而不是旧的，已弃用的属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

width属性工作正常

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

size属性无法使用类型为input的{{1}}元素。但是，您可以使用CSS轻松地使其变大或变小：

＆＃13;

range

＆＃13;

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

＆＃13;

Answer 4

通过CSS设置宽度

<bound method Response.json of <Response [200]>>

Answer 5

您不能在不使用CSS的情况下更改HTML5范围输入的长度/大小。

您可以使用的唯一属性是value，min，max和step。而且没有一个能满足您的需求。

在This上查找滑块样式以获取更多信息

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

5 个答案: