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

我试图获得这样的离子观点

i want it ideally to look like this

But right now i have this

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

如果有人知道如何解决这个或我需要做什么，以改变离子选择和离子选项菜单的外观我真的很感激 .

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%">