增加数字输入，CSS，HTML上的向上和向上箭头的大小 [英] Increase the size of the down and up arrow on the number input, CSS, HTML

问题描述

有没有办法通过CSS增加数字输入框右侧的向上和向下箭头的大小？只是上下箭头，而不是整个输入框，或至少按比例。看到这个例子：

Is there a way to increase the size of the up and down arrow on the right of the number input box by using CSS? Just the up and down arrows, not the whole input box, or at least proportionally. See this example:

.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">

当前结果：

推荐答案

没有正式的方式来设置数字输入元素;你将不得不来一个黑客。这些答案显示了几种方法：

There is no official way to style number input elements; you will have to come with a hack. These answers shows a few ways to do it:

• 样式输入类型=数字


• 制作HTML输入数字的箭头更大更清晰

• Styling a input type=number
• Making up down arrow of HTML's input number very bigger and cleaner

主要问题是放置较大箭头的位置。您不希望更改输入的大小，这意味着箭头只能变宽（或者它们不再适合输入）。您将不得不考虑解决此问题的方法。

The main problem is where to put the bigger arrows. You don't want to change the size of the input which means the arrows can only grow wider (or they wouldn't fit into the input anymore). You will have to think of a way to solve this.

可能的解决方案：在输入元素后显示箭头，隐藏它们，除非将鼠标悬停在元素上，使用光标键增加/减少数量，所以你根本不需要鼠标。

Possible solutions: Show the arrows after the input element, hide them unless you hover over the element, use cursor keys to increase/decrease the number, so you don't need a mouse at all.

这篇关于增加数字输入，CSS，HTML上的向上和向上箭头的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！