Hiding spin buttons on number input html ionic

0
votes

I am looking for a fail-safe way to hide spin buttons from a number input field in an HTML template for Ionic.

The following HTML code displays an input with spinner buttons:

<ion-input type='number'></ion-input>

The type=number is convenient for mobile, since it triggers the numeric keyboard. But the spinner buttons are too small for a good user experience.

How can I correctly hide them for all browsers/webkits? Thanks

1
htmlcssionic-frameworkmobileionic3
Are you refering to the up and down arrows in the number input? – Sirence
Yes the up and down arrows – IJB

1 Answers

4
votes

To hide them in webkit based browsers, add this to your css file:

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

To hide them on Firefox, add this as well:

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