javascript - 如何设置输入类型 ="number"的样式？

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

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

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