如何自定义离子选择和离子选项菜单（离子）答案

【问题标题】：How to customise the ion-select and ion-option menu (ionic)如何自定义离子选择和离子选项菜单（离子）
【发布时间】：2019-04-23 16:32:12
【问题描述】：

我正在尝试获得这样的离子视图

i want it ideally to look like this

But right now i have this

我需要更改或添加什么来获得这个布局，或者这个设计主题只是 android 操作系统的一部分而不是 ionic 应用程序？

如果有人知道如何解决这个问题或者我需要做什么来改变离子选择和离子选项菜单的外观，我将不胜感激。

SCSS

page-home {
.center {
display: block;
margin: auto;
padding-top: 5px;
padding-bottom: 10px;
}
.margins {
margin-left: 5%;
margin-right: 5%;
}
.ilb {
display: flex;
margin: 5px;
}
.curved {
margin-bottom: 10px;
border-radius: 10px;
}
.curvedButton {
margin-left:10px;
margin-right: 10PX;
border-radius: 10px;
}

}

HTML

<div class="margins">
<form [formGroup]="todo" (ngSubmit)="CreateUser()" novalidate>
  <ion-item class="curved">
    <ion-label>Name</ion-label>
    <ion-input type="text" formControlName="name"></ion-input>
    <p color="danger" ion-text *ngIf="todo.get('name').hasError('required')">*Required</p>
  </ion-item>
  <ion-item class="curved">
    <ion-label>Company</ion-label>
    <ion-input type="text" formControlName="company"></ion-input>
  </ion-item>
  <ion-item class="curved">
    <ion-label>Room</ion-label>
    <ion-select #C (ionChange)="onChange(C.value)" id="roomFilter" formControlName="room">
      <ion-option *ngFor="let lab of labs" value="{{lab}}" type="string">{{lab}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item  class="curved" *ngIf="todo.get('room').errors && todo.get('room').dirty">
    <p color="danger" ion-text *ngIf="todo.get('room').hasError('required')">*Required</p>
  </ion-item>
  <ion-item class="curved">
    <ion-label>PassID</ion-label>
      <ion-select formControlName="passID" multiple="true" id="passesID">
        <ion-option *ngFor="let pass of passes" value="{{pass}}">{{pass}}</ion-option>
      </ion-select>
  </ion-item>
  <ion-item  class="curved" *ngIf="todo.get('passID').errors && todo.get('passID').dirty">
    <p color="danger" ion-text *ngIf="todo.get('passID').hasError('required')">*Required</p>
  </ion-item>
  <ion-item class="curved">
    <ion-label>Pass Return Date</ion-label>
    <ion-datetime displayFormat="DD MMM YYYY " min="2018" max="2030" formControlName="date" multiple="true">
    </ion-datetime>
  </ion-item>
  <div class="ilb">
    <button class="curvedButton" ion-button block type="Reset">Reset Form</button>
    <button class="curvedButton" ion-button block type="submit" [disabled]="!todo.valid">Create</button>
  </div>
<ion-row style="height: 100px"></ion-row>
  <img alt="CC Logo" src="assets/imgs/Global Solutions Center_white.png" class="center" width="100%">

【问题讨论】：

标签： javascript html css ionic-framework ionic3

【解决方案1】：

这就是它在 iOS 中的外观，您可以通过打开 chrome 开发工具并选择 iOS 手机来检查它，它会看起来像这样。我查看了 ion 选择文档，它没有说明例如模式属性并将其更改为 iOS，所以我不知道如果不手动更改所有样式是否真的可行。

【讨论】：