Solve scroll in form type number bug in Chrome / Firefox


Using form with type=”number” is great. But, the scroll seems annoying. Here is to avoid this issue using css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Fix input type number scroll */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <– Apparently some margin are still there even though it’s hidden */
}

/* hides the spin-button for firefox */
input[type=number] {
    -moz-appearance:textfield;
}
/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.