Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

number input - always show spin buttons

In Google Chrome, input[type=number] spin buttons are shown only on hover.

Chrome spin buttons

This is the code I use:

<input type="number" value="1" min="1" max="999" />

Is there any way to always show spin buttons?

like image 664
Draex_ Avatar asked Jun 18 '14 13:06

Draex_


People also ask

How do you hide the input number in Arrows?

Using inputmode=”numeric” attribute you can find an input box without an arrow.

How do I turn off input type number?

If you are able/allowed to use jQuery, you can disable keypress on the type='number' . $("[type='number']"). keypress(function (evt) { evt. preventDefault(); });

How do you restrict inputs to only numbers?

1. Using <input type="number"> The standard solution to restrict a user to enter only numeric values is to use <input> elements of type number. It has built-in validation to reject non-numerical values.


1 Answers

You can target spin buttons using ::-webkit-inner/outer-spin-button and than just set opacity to 1 (spins are always there, but in default they have opacity: 0).

Code:

<style>    input[type=number]::-webkit-inner-spin-button {     opacity: 1 }  </style> <input type="number" value="1" min="1" max="999"> 

Fiddle: http://jsfiddle.net/dk8fj/

like image 69
pavel Avatar answered Oct 04 '22 04:10

pavel