Ionic3中<select>标签出现全屏大阴影问题求助

既然你想用原生select，那得用Ionic的深度选择器来穿透样式隔离，强制覆盖它的阴影属性：

1. 先给你的容器加上Ionic的表单类（比如item），让它适配框架的布局：

<ion-item class="clockselect">
  <label>Type:</label>
  <select [(ngModel)]="alarm.type" style="font-size: 20px">
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option> <!-- 这里你拼写错啦，是Tuesday不是Thuesday -->
    <option value="Wednesday">Wednesday</option>
  </select>
</ion-item>

2. 在对应的组件CSS里添加深度选择器，去掉阴影：

.clockselect ::ng-deep select {
  box-shadow: none !important;
  --box-shadow: none !important; /* 兼容Ionic的CSS变量写法 */
}

注意：::ng-deep是Angular用来穿透组件样式隔离的语法，在Ionic3里是有效的。

方案二：改用Ionic官方的ion-select组件（更推荐） #

其实Ionic专门提供了适配移动端的选择器组件ion-select，不仅不会有奇怪的阴影，交互体验也更贴合移动端，完全不用自己调样式：

<ion-item class="clockselect">
  <ion-label>Type:</ion-label>
  <ion-select [(ngModel)]="alarm.type" interface="popover">
    <!-- interface可选值：alert（默认弹窗）、popover（弹出层）、action-sheet（底部菜单） -->
    <ion-select-option value="Sunday">Sunday</ion-select-option>
    <ion-select-option value="Monday">Monday</ion-select-option>
    <ion-select-option value="Tuesday">Tuesday</ion-select-option>
    <ion-select-option value="Wednesday">Wednesday</ion-select-option>
  </ion-select>
</ion-item>

这个组件会自动适配Ionic的样式体系，完全不会出现全屏阴影的问题，而且在不同平台（iOS/Android）会自动切换对应的原生风格，体验比原生select好太多~

内容的提问来源于stack exchange，提问作者Nitrof