Turn Off HTML5 Number Input Spinners

Question

I was trying to disable the input spinner but all I could fine here was to hide it, like this:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

But how can it be completely disabled ?

Rodrigo · Accepted Answer · 2018-03-01 05:03:25Z

3

Try this:

/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}

/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Source: https://blog.rudolphk.co.za/css-tip-remove-spinner-on-input-of-number-9fc4d9cac121

answered Mar 1, 2018 at 5:03

Rodrigo

1511 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Litty Over a year ago

This doesn't appear to address the question.

Rodrigo Over a year ago

Apparently you did not even try the solution, because it worked for me

ForeverSJC · Accepted Answer · 2016-08-01 19:48:21Z

0

Using this Jquery you can disable it, so the mouse wheel wont change the numbers

$(':input[type=number]').on('mousewheel', function(e){
    $(this).blur(); 
});

Source: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

answered Aug 1, 2016 at 19:48

ForeverSJC

3122 gold badges5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Turn Off HTML5 Number Input Spinners

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related