如何让HTML数字输入框点击向上箭头首次显示0而非1？

浏览器自带的<input type="number">控件有默认步进行为：当输入框为空时，点击向上箭头会自动将值设为min + step（默认step=1，所以min=0时结果就是1），只有点击向下箭头才会直接设置为min值（0）。

如果不想用JavaScript自定义控件，有一个纯CSS的折中方案可以接近需求：

1. 给输入框设置初始value="0"
2. 用CSS让输入框在非交互状态下隐藏文字，仅在聚焦或交互时显示

具体代码如下：

HTML：

<input type="number" min="0" max="99" value="0" class="zero-start">

CSS：

.zero-start:not(:focus):not(:hover):not(:active) {
  color: transparent;
  text-shadow: none;
}
/* 确保浏览器默认的步进箭头始终可见 */
.zero-start::-webkit-inner-spin-button {
  opacity: 1;
}
.zero-start::-moz-inner-spin-button {
  opacity: 1;
}

这个方案的效果是：默认状态下输入框看起来是空的，当用户点击向上箭头（此时输入框自动获得焦点），会立即显示0；再次点击向上箭头，值会递增到1，点击向下箭头则保持0。

需要注意的是，这只是视觉上的折中方案，输入框的实际初始值是0，只是默认隐藏了。如果需要输入框真正从空值触发首次点击向上箭头得到0，目前纯HTML/CSS无法实现，必须借助JavaScript修改步进行为。

内容的提问来源于stack exchange，提问作者Rolch2015