css - show spinner for input type number in HTML5 -

I am working with HTML5, I have a numerical control ( input type = "number" ). By default, I need a spinner (top and bottom arrows) to appear in control, is now visible on hover.

Can I get it by CSS? Or is there any other way?

You can get it by using pseudo squares -webkit-internal-spin- Button and -webkit-outer-spin-button . Keep in mind that this move will only work in WebKit based browsers, like Chrome.

Example:

  / * always * / input [type = number] :: - WebKit-internal-spin-button, input [type = number] :: - Webkit-outer-spin-button {opacity: 1; }  

Since you want to display when the hover event is triggered, the previous example would be:

  / * on hover * / input [type = number ]: Hover :: - webkit-inner-spin-button, input [type = number]: hover :: - webkit-outer-spin-button {opacity: 1; }  

Check this to see a work example.

If you want to extend your functionality to other browsers, then you have to create a widget. The fastest way is using it.