In Google Chrome, input[type=number]
spin buttons are shown only on hover.
This is the code I use:
<input type="number" value="1" min="1" max="999" />
Is there any way to always show spin buttons?
Using inputmode=”numeric” attribute you can find an input box without an arrow.
If you are able/allowed to use jQuery, you can disable keypress on the type='number' . $("[type='number']"). keypress(function (evt) { evt. preventDefault(); });
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With