Ionic弹窗中ion-input数字类型的微调按钮如何调整大小？

我太懂这种烦恼了——Ionic弹窗里的数字输入框微调按钮默认尺寸确实太小，自己瞎写的CSS还不生效，简直让人头大！我来帮你搞定这个问题。

首先得说清楚，你之前的CSS选择器用错啦！那些微调按钮根本不是ion-spinner组件，而是数字输入框自带的伪元素（WebKit内核浏览器的专属），所以你写的ion-spinner.alert-input.myCustomClass完全找不到目标元素，自然没效果。

接下来给你正确的解决步骤：

• 你的TS代码没问题，给input绑定cssClass: 'myCustomClass'这一步是对的，不用改。
• 打开global.scss，替换成下面的CSS代码：

/* 精准定位弹窗中带自定义类的数字输入框微调按钮 */
.alert-wrapper .myCustomClass input[type=number]::-webkit-inner-spin-button,
.alert-wrapper .myCustomClass input[type=number]::-webkit-outer-spin-button {
  width: 3em;
  height: 3em;
  opacity: 1; /* 部分浏览器默认会隐藏按钮，强制显示出来 */
  cursor: pointer; /* 加上鼠标指针样式，交互更友好 */
}

额外说明： #

1. 为什么要加.alert-wrapper？
   因为Ionic的弹窗是在独立的阴影DOM容器里的，加上这个类可以确保我们的样式只作用于弹窗里的输入框，不会影响全局其他数字输入框。
2. 要是你还想调整按钮的外观，比如背景色、圆角，可以在选择器里继续加样式，比如：

.alert-wrapper .myCustomClass input[type=number]::-webkit-inner-spin-button {
  background-color: #f0f0f0;
  border-radius: 6px;
  margin: 0.2em;
}

这样修改后，你再打开弹窗，就能看到尺寸变大的微调按钮啦！

内容来源于stack exchange