Whereas I take pleasure in small particulars that make consumer interfaces extra elegant, I additionally imagine that much less is extra, particularly with regards to native habits. One native habits I dislike is that <enter sort="quantity" /> parts solely present the increment and decrement arrows when the enter is concentrated. It is a useless focus change — simply present these controls on a regular basis.

So how will we present these controls when the enter is not centered? A simple little bit of CSS:

/* ensures the increment/decrement arrows all the time show */
enter[type=number]::-webkit-inner-spin-button, 
enter[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

I admire that the browser’s native stylesheet does not use hidden methods or privileged code — it is all simply CSS that we are able to override.

I am all the time suspect with regards to hover results, as I really feel hiding UI parts decreases accessibility it doesn’t matter what the reason being.