Question

这里是代码： https://jsfiddle.net/v2tkk26u/3/

<input type="number" id="numeric" size="1"/>

我希望输入的尺寸较小（因为它只能容纳一个数字），但更改尺寸属性似乎对它没有任何影响。

此外，向上箭头太小，特别是当我向输入添加填充时。我希望让它们更大并始终保持显示，而不仅仅是悬停（以使它们适合移动设备）。

Answer 1

您可以在CSS中设置width和height属性。例如，这会将width和height分别设置为10px。当然，您可以将其更改为您想要的任何大小。

#numeric {
    color:blue;
    font-size:1.1em;
    border-radius:5px;
    padding: 5px;
    width: 10px;
    height: 10px;
}

修改

没有发现您尝试设置输入type="number"的样式。我强烈建议阅读this article以阅读有关CSS属性选择器的更多信息。但下面我将总结并将其与您的问题联系起来。

因此，在您的示例中，如果要为所有input HTML标记设置样式type="number"，您可以执行以下操作。

input[type="number"] { color:blue; font-size:1.1em; border-radius:5px; padding: 5px; width: 10px; height: 10px; }

如果您想要选择input所有元素（不仅仅是type="number"元素），您可以执行以下操作。

[type~="number"] { color:blue; font-size:1.1em; border-radius:5px; padding: 5px; width: 10px; height: 10px; }

Answer 2

除了@ CharlieFish的回答之外，您可能还想添加一些代码来将元素限制为仅1个字符。使用min和max元素限制他们输入该范围内的数字。

除此之外，您可能希望让他们只能键入1个号码。此代码允许您这样做：

document.getElementById('numeric').oninput = function () {
    if (this.value.length > 1) {
        this.value = this.value.slice(0,1); 
    }
}

请参阅jsfiddle here

Answer 3

试试这个..

body {
  background:yellow;
}
 #numeric {
   color:blue;
   font-size:1.1em;
   border-radius:5px;
   padding: 5px;
   height:20px;
   width:50px;
 }
 input[type=number] {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0 8px;
}

如何设置输入类型=＆＃34;数字＆＃34;？

3 个答案: