如何设置输入类型＝""的样式;数字"

How do I style input type="number"?

本文关键字：quot 数字 样式 类型 何设置 设置 输入      更新时间：2023-09-26

以下是代码：https://jsfiddle.net/v2tkk26u/3/

<input type="number" id="numeric" size="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"。我强烈建议阅读这篇文章，以了解更多关于CSS属性选择器的信息。但下面我将进行总结，并将其与您的问题联系起来。

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

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

如果要选择type="number"中的所有元素(而不仅仅是input元素(，可以执行以下操作。

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

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

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

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

请在此处查看jsfiddle

试试这个。。

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;
}
相关文章：