This content originally appeared on David Walsh Blog and was authored by David Walsh
While I enjoy small details that make user interfaces more elegant, I also believe that less is more, especially when it comes to native behavior. One native behavior I dislike is that <input type="number" /> elements only show the increment and decrement arrows when the input is focused. It’s a needless focus change — just show those controls all the time.
So how do we show those controls when the input isn’t focused? An easy bit of CSS:
/* ensures the increment/decrement arrows always display */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
I appreciate that the browser’s native stylesheet doesn’t use hidden tricks or privileged code — it’s all just CSS that we can override.
I’m always suspect when it comes to hover effects, as I feel hiding UI elements decreases accessibility no matter what the reason is.
The post Always Show Arrows for Number Input appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2021-06-21T13:52:09+00:00) Always Show Arrows for Number Input. Retrieved from https://www.scien.cx/2021/06/21/always-show-arrows-for-number-input/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.