Always show arrows for digital input

Although I like the small details that make the user interface more elegant, I also believe that less is more, especially in terms of native behavior.One native behavior I don’t like is <input type="number" /> Elements only show increasing and decreasing arrows input Is focused.This is an unnecessary focus Change—These controls are always displayed.

So how do we display these controls, when input Not focused? A simple CSS code:

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

I appreciate that the browser’s native style sheet does not use hidden tricks or privileged code-we can cover all the CSS.

I always doubt the hover effect, because I feel that hiding UI elements will reduce accessibility, no matter what the reason.

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted at mobile users than desktop users.One of those simple APIs Vibration APIThe Vibration API allows developers to use JavaScript to guide the device to…

  • Use CSS to create a glossy logo effect
  • Downloadify: Use JavaScript and Flash to generate client-side files
  • jQuery countdown plugin

    You may have visited sites such as RapidShare and MegaUpload, which allow you to download files, but you need to wait a specified number of seconds before providing the download link. I created a similar script, but my script allows you to animate the CSS font size…

Leave a Reply

Your email address will not be published. Required fields are marked *