Как увеличить длину/размер входного типа HTML5 диапазона

83
8

Как увеличить длину/размер ввода диапазона HTML5, чтобы увеличить его/увеличить?

<!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:

enter image description here

спросил(а) 2017-05-26T23:02:00+03:00 3 года, 6 месяцев назад
1
Решение
58

Изменение ширины отлично работает для меня 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>

ответил(а) 2017-05-26T23:05:00+03:00 3 года, 6 месяцев назад
59

Вы не можете изменить длину/размер ввода диапазона HTML5 без использования CSS.

единственными атрибутами, которые вы можете использовать, являются значения, min, max и step. И никто из них не делает то, что вам нужно.

Найдите Styling the Slider для этого для получения дополнительной информации

ответил(а) 2017-05-26T23:13:00+03:00 3 года, 6 месяцев назад
60

Установите ширину с помощью CSS

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

ответил(а) 2017-05-26T23:06:00+03:00 3 года, 6 месяцев назад
59

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>

ответил(а) 2017-05-26T23:06:00+03:00 3 года, 6 месяцев назад
59

Свойство width отлично работает

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;
}

ответил(а) 2017-05-26T23:05:00+03:00 3 года, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема