增加数字输入框中上下箭头的大小，CSS，HTML

Question

15

是否有办法使用CSS增加数字输入框右侧上下箭头的大小？只是上下箭头，不是整个输入框，或者至少按比例调整大小。请参考以下示例：

.size-36 {
font-size: 36px;
}

.size-12 {
font-size: 12px;
}

<input type="number" class="size-36" value="2" min="0" max="10" step="1">
<input type="number" class="size-12" value="2" min="0" max="10" step="1">

<input type="number" value="2" min="0" max="10">

当前结果：

- frosty

@TechWisdom 那个问题是要求如何让整个输入框变大，而不仅仅是上下箭头。我的问题是要问如何只让上下箭头变大，所以这是一个不同的问题。 - frosty

2个回答

7

您可以更改输入“number”元素的字体大小。这将增加箭头按钮的大小。也许不完全是您要寻找的，但无论如何=

<input type="number" value="1" min="1" max="8" style="font-size: 55px;">

- Mirdon Cosh

正是我所需要的。谢谢！ - Klesun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron Digulla · Accepted Answer

没有官方的方法可以设置数字 input 元素的样式；您需要使用一些技巧来改变其外观。这些答案展示了几种方法：

主要问题在于如何放置更大的箭头。您不想更改输入框的大小，这意味着箭头只能变得更宽（否则它们就无法适应输入框）。您需要想出一种解决方法。

可能的解决方案：在输入框元素后显示箭头，在鼠标悬停在元素上时显示它们，使用光标键增加/减少数字，这样您根本不需要鼠标。