css - 如何控制输入类型="number"箭头按钮的大小

Question

我正在实现一个 type="number"的输入组合框。

我想调整上箭头按钮和下箭头按钮的大小。

我认为这些按钮太小了，用户可能会觉得点击 Action 不方便。

我一直在尝试通过谷歌搜索来解决这个问题，调查它的属性和选择器，但我找不到任何方法，我认为这是因为数字框最近发布了 HTML5 标签。

如何调整这个尺寸？请给我任何想法。请。

问候，

<td>
<input type="number" name="qty" value="1" name="goodsnum" onChange = "qtyChanged();">
</td>

Answer 1

您可以通过 css 与箭头进行交互。

input[type=number] {
    height: 30px;
}

input[type=number]:hover::-webkit-inner-spin-button {  
    width: 14px;
    height: 30px;
}

<input type="number" value="0" >