通过 CSS 呈现 HTML 输入元素微调器

Question

当我更改

<input type="number">

元素的字体大小 CSS 属性时，无论是直接使用 CSS 还是通过 JavaScript 在元素后创建，微调器都不会在 FireFox 或 Safari 中更改大小。输入/显示框可以。因此，对于较大的字体——对于可访问性极其重要——当字体较大时，实际的微调按钮相对较小。

在 FireFox 中：

对

根据 Mozilla，今天早上检查：

没有标准的方法来改变用于改变字段值的微调器的样式，Safari 上的微调器在字段之外。

这好像……不合理。微调器大小不跟踪使用中的字体大小似乎也不合理。我觉得我must错过了一些东西。

我唯一的选择是完全滚动我自己的微调器吗？

Answer 1

• 为向上/向下按钮（微调器）使用自定义样式：
  是的，您需要创建自己的自定义输入元素。
• 如果您担心“触摸”设备：
  这些设备上的浏览器应负责提供适当的方法来更改数字。

浏览器的标准表单元素（如

input

）非常基本且没有样式，几乎就像所有 HTML 元素（例如

h1

，

p

，

ul

，......）会有一些基本的如果您要创建没有任何 CSS 的 HTML 页面，则使用默认样式。

你可以创建一个没有任何样式的 HTML 页面，包括数字输入，你可能不喜欢这种样式，但它看起来是一致的。如果缩放整个页面（通常是

CTRL

+

/

CTRL

-

/

CTRL

mouse-wheel

），那么向上/向下按钮也会缩放以匹配字体大小。

向上/向下按钮本身不是 HTML 元素，而只是浏览器提供的“方便”添加。为了满足声明

<input type="number">

，浏览器理论上可以决定只渲染输入框，或者只渲染一些向上/向下按钮，或者其他东西。

例如，情况更糟。一个

<input type="file">

，它呈现包括一个按钮和一个文件名，不能用CSS设置样式。

Answer 2

很可能有一些不正确的东西你没有添加到问题中，因为增加

font-size

的

<input>

实际上也会使它的按钮（你称为 spinners）更大。检查以下脚本：

input {
  width: 100%;
  font-size: 64px;
}

<input type="number" />

我在基于 Chromium 的浏览器（例如 Chrome/Brave）上获得的结果：