HTML输入元素通过CSS渲染微调器。

Question

当我改变<input type="number">元素的字体大小CSS属性时，无论是直接用CSS还是通过JavaScript在元素创建后，旋转器在FireFox或Safari中都不会改变大小。这个输入/显示框确实会改变大小。因此，在更大的字体下（对于无障碍性来说非常重要），当字体很大时，实际的旋转按钮相对较小。

在FireFox中：

与

根据Mozilla今天早上的检查:

没有标准的方法可以更改用于更改字段值的旋转器的样式，Safari上的旋转器位于字段外。

这似乎不太合理。旋转器的大小与使用的字体大小不对应，这也显得不合理。我感觉我一定漏掉了什么。

难道我的唯一选择是彻底自己编写旋转器吗？

- fyngyrz

Answer 1

原来为 input[type="number"] 制作更大的控件并不是跨浏览器功能。因此，您可以做的一件事是“模拟”控件以使其在任何地方都能正常工作。

1-首先隐藏本机控件

这可以通过简单的 CSS 完成，如下所示：

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

2- 接下来添加两个自定义按钮及其操作

（完整解决方案）

const input = document.getElementById("nb-input");
function returnNb(nb) {
  if (nb) return parseFloat(nb);
  else return 0;
}
const increment = () => input.value = (returnNb(input.value) + 1).toString();
const decrement = () => input.value = (returnNb(input.value) - 1).toString();

input {
  font-size: 34px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.container {
  display: flex;
  width: 200px;
}
.controls {
  display: flex;
  flex-direction: column;
}
.spinner {
  flex: 50%;
}

<div class="container">
  <input id="nb-input" type="number" />
  <div class="controls">
    <button class="spinner" onclick="increment()">
      <svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z" />
      </svg>
    </button>
    <button class="spinner" onclick="decrement()">
      <svg width="24" height="24" viewBox="0 0 16 16">
        <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
      </svg>
    </button>
  </div>
</div>

当然你可以按照自己的需求自定义按钮，你不必跟随我所使用的样式。

敬礼

- underflow

---

看起来你可能省去了我的一些工作。谢谢你。我会在周一尝试一下，并且肯定会回来点赞的。 - fyngyrz

Answer 2

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

浏览器标准表单元素（如input）只是非常基本和未经过样式设计的，就像所有HTML元素（例如h1，p，ul，...）一样，如果您创建一个没有任何CSS的HTML页面，则会有一些基本的默认样式。

您可以创建一个没有任何样式的HTML页面，包括数字输入，您可能不喜欢样式，但它看起来很一致。如果您缩放整个页面（通常是CTRL + / CTRL - / CTRL 鼠标滚轮），那么上/下按钮也会按比例缩放以匹配字体大小。

上下按钮本身不是HTML元素，而只是浏览器提供的“便利”添加。为了满足声明<input type="number">，浏览器理论上可以决定仅呈现输入框，或仅呈现一些上/下按钮，或其他一些内容。

对于例如<input type="file">更糟糕，它包括一个按钮和一个文件名，不能使用CSS进行样式设置。

- kca