隐藏数字输入HTML离子上的旋转按钮

Question

我正在寻找一种安全的方法来隐藏Ionic的HTML模板中数字输入字段中的旋转按钮。

以下HTML代码显示带有微调按钮的输入：

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

type=number便于移动，因为它会触发数字键盘。但是微调按钮太小，无法获得良好的用户体验。

如何为所有浏览器/ Webkit正确隐藏它们？ 谢谢

Answer 1

要在基于Webkit的浏览器中隐藏它们，请将其添加到您的CSS文件中：

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

要在Firefox上隐藏它们，请同时添加以下内容：

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