Skip to Content (Press Enter)
UserImage.jpg
b_pal
9958Views
2Comments
Solved
Remove arrows from inputs of type number
Question

I want to create input boxes strictly for inserting numeric digits but i want to remove the up and down arrows that appear on the right side of the input box. How can i achieve this?

0
0
04 May 2018
Copy Link
2018-08-27 08-29-35
Fábio Vaz
Solution

b_pal wrote:

I want to create input boxes strictly for inserting numeric digits but i want to remove the up and down arrows that appear on the right side of the input box. How can i achieve this?


b_pal,


Using this CSS: 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
2
0
04 May 2018
Copy Link
UserImage.jpg
Tiji Varghese

You can easily do that using CSS . The solution above by Fabio does cover webkit however to do that on Mozilla you need to add the following :

input[type='number'] {
    -moz-appearance:textfield;
}

You can read more about it here : Remove arrows from inputs of type number

0
0
20 Sep 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.