How to remove the arrow keys on the right side of ion-input type="number"?

Ionic Framework
1

Hi guys, I just wanted to know on how to remove the arrow keys called spinner on the right side of ion-input type=“number”.

Here is my code:

<ion-item>
    <ion-label position="floating">Height</ion-label>
    <ion-input id="height" type="number" placeholder="cm" required></ion-input>
</ion-item>

This is the sample output

number

Another thing, does the ion-input with type=“number” support float value? Thanks

1 Like
2

This is going to be a pretty huge PITA, both due to the fact that it’s going to depend on the underlying browser and that you’re going to have to fight with the shadow DOM. I would recommend against using type="number" if the spinner bothers you that much.

Yes. Remember JavaScript has only floating-point numbers.

3

Hello
Put this in your scss file

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 Likes
4

Last thing, do you think that if this application executed via phone, the spinner (arrow keys) will be remove?

5

Noted, i will try this one. Wait a little bit.

6

I’m not sure that would work in Safari, but even then you’re going to lose the battle with the shadow DOM, I think.

7

Hello,
I have tested this in safari and in both android and iOS devices.

1 Like
8

Hi guys, when i try to run the app in real device the arrow keys removed. :slight_smile:

9

It’s work on the mobile device, but the spinner still showing in the browser (chrome)