html5输入框最小长度限制,如何增加HTML5输入类型范围的长度/大小(How to increase the length/size of HTML5 input type of range)...

如何增加HTML5输入类型范围的长度/大小(How to increase the length/size of HTML5 input type of range)

如何增加HTML5 范围输入的长度/大小以使其更长/更大？

Points:

我厌倦了属性size="100px"和width="100px"但它们没有用。 我想知道是否甚至可以改变HTML5范围输入的长度/大小：

How can I increase the length/size of the HTML5 range input to make it longer/bigger?

Points:

I tired attribute size="100px" and also width="100px" but they didn't work. I wonder if it is even possible to change the lenght/size of HTML5 range input:

原文：https://stackoverflow.com/questions/44209345

更新时间：2019-11-02 17:45

最满意答案

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

input[type="range"] {

width:400px;

}

Points:

Modifying the width works fine for me https://jsfiddle.net/j08691/592ydrk2/. Note you need to use CSS, not old, deprecated attributes.

input[type="range"] {

width:400px;

}

Points:

相关问答

修改宽度对我来说很好， https：//jsfiddle.net/j08691/592ydrk2/ 。 请注意，您需要使用CSS，而不是旧的，已弃用的属性。 input[type="range"] {

width:400px;

}

Points:

...

到目前为止，它不可能动态传递不同的值，但如果有人想通过范围类型显示选项，那么他需要像上面提到的@phari那样做。 假设我们有一个范围类型输入，我们想要选择一些值。 输入类型的代码是：

这里任何人都可以选择'0到3'之间的值。 现在我们添加一些javascript来获取值并使用它们。 是新的，您已经尝试使用CSS进行自定义。 :) 我不会尝试这两个原因： 现在和未来几年(或许多年)可能存在巨大的兼容性问题 。 认为在现在这样的表单控件，如 (自Web开始以来可用)仍然是以跨浏览器方式使用CSS定制的问题。 例如，如果您为选择框设置了一个padding ，则许多浏览器(IE7，OPERA9，CHROME5，SAFARI4)将完全忽略该填充。 它仅适用于IE8和FF 3.6。 (所有测试使用HTML5 DOCTYPE完成，因此

...

这使用javascript，而不是jquery直接。 这可能有助于您开始。 function updateTextInput(val) {

document.getElementById('textInput').value=val;

}

...

您可以搜索最接近的有效值并为每个值更改事件将输入值设置为该值 var inputElement = document.getElementById('customRangeInput');

inputElement.oninput = setInput;

inputElement.onchange = setInput; // IE fix

function setInput(){

inputElement.value = closestValue(inputElement.val

...

将其添加到输入以覆盖默认的浏览器样式： &::focus

outline: none

-moz-box-shadow: none

-webkit-box-shadow: none

box-shadow: none

Add this to input to overwrite default browser styles: &::focus

outline: none

-moz-box-shadow: none

-webkit-box-sha

...

我相信你无法轻易达到你想要的目标。 输入文本字段元素似乎是一个特殊元素，它的高度将相应地自动增加到字体大小，限制高度当然会使中间文本行走向底部并且看起来确实很难看。 为了解决这个问题，我认为我们必须剪掉顶部和底部(距离相等)，然后让中间部分显示(与文本行一起)。 要剪掉它，我们需要一个围绕输入字段的包装器，适当地定位输入字段并为包装器设置overflow:hidden 。 以下是代码详细信息： HTML ：

Use the mouseup event on desktop browsers and the touchend event on mobile phones for handling this user interaction.

οnmοuseup="callfunction

...

var pintor = document.getElementById('mycanvas').getContext('2d');

function canvasDrawsTriangle(corFundo,corLinha, x0,y0,x1,y1,x2,y2){

pintor.fillStyle=corFundo;

pintor.strokeStyle=corLinha;

pintor.beginPath();

pintor.moveTo(x0,y0);

pi

...

我假设滑块使用的是Javascript，因此你需要一个Capybara驱动程序与Javascript交互，比如Poltergeist 。 I assume that the slider is using Javascript so you will need a driver for Capybara to interact with Javascript, like Poltergeist.