Always Show Arrows for Number Input

虽然我喜欢让用户界面更优雅的小细节，但我也相信少即是多，尤其是在原生行为方面。我不喜欢的一种原生行为是<；input type=“数字”/>元素仅在聚焦输入时显示递增和递减箭头。这是一个不必要的焦点更改--只需始终显示这些控件即可。

那么，当＜code＞输入

/* ensures the increment/decrement arrows always display */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

我很感激浏览器的原生样式表没有使用隐藏的技巧或特权代码——我们可以覆盖的只是CSS。

当谈到悬停效果时，我总是感到怀疑，因为无论是什么原因，我都觉得隐藏UI元素会降低可访问性。