Ionic-v4 input type=number shows spinner

Ionic Framework ionic-v3
1

I have been using ionicv4 beta for development
when I try this

<ion-input [(ngModel)]="userphone" type="number" name="phone" #phone="ngModel"  spellcheck="false" 
        pattern="/(7\d|8\d|9\d)\d{9}$/" required>
 </ion-input>

I get the increment/decrement buttons as a spinner on the right side of the HTML.

I tried using the following n the global CSS but still, it doesn’t solve the problem.

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

The above CSS doesn’t show the increment/decrement buttons when we use HTML input element

<input type="number"></input>
instead of
<ion-input type="number></ion-input>

but I have been using a floating label which requires <ion-input>

Can anyone help me on this?

1 Like
2

Bump,

1 year later… same question.