title: How to customise the ion-select and ion-option menu (ionic)
body: <p>i am trying to get an ionic view such as this</p>
  
  <p><a href="https://i.stack.imgur.com/RZld4.png" rel="nofollow noreferrer">i want it ideally to look like this</a></p>
  
  <p><a href="https://i.stack.imgur.com/awqv6.png" rel="nofollow noreferrer">But right now i have this </a></p>
  
  <p>what do i need to change or add to get this layout, or is this design theme just a part of the android OS rather than ionic application?</p>
  
  <p>if anyone knows how to fix this or what i need to do in order to change the look of the ion-select and ion-options menus i would really appreciate it.</p>
  
  <p>SCSS</p>
  
  <pre><code>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;
  }
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="margins"&gt;
  &lt;form [formGroup]="todo" (ngSubmit)="CreateUser()" novalidate&gt;
    &lt;ion-item class="curved"&gt;
      &lt;ion-label&gt;Name&lt;/ion-label&gt;
      &lt;ion-input type="text" formControlName="name"&gt;&lt;/ion-input&gt;
      &lt;p color="danger" ion-text *ngIf="todo.get('name').hasError('required')"&gt;*Required&lt;/p&gt;
    &lt;/ion-item&gt;
    &lt;ion-item class="curved"&gt;
      &lt;ion-label&gt;Company&lt;/ion-label&gt;
      &lt;ion-input type="text" formControlName="company"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item class="curved"&gt;
      &lt;ion-label&gt;Room&lt;/ion-label&gt;
      &lt;ion-select #C (ionChange)="onChange(C.value)" id="roomFilter" formControlName="room"&gt;
        &lt;ion-option *ngFor="let lab of labs" value="{{lab}}" type="string"&gt;{{lab}}&lt;/ion-option&gt;
      &lt;/ion-select&gt;
    &lt;/ion-item&gt;
    &lt;ion-item  class="curved" *ngIf="todo.get('room').errors &amp;&amp; todo.get('room').dirty"&gt;
      &lt;p color="danger" ion-text *ngIf="todo.get('room').hasError('required')"&gt;*Required&lt;/p&gt;
    &lt;/ion-item&gt;
    &lt;ion-item class="curved"&gt;
      &lt;ion-label&gt;PassID&lt;/ion-label&gt;
        &lt;ion-select formControlName="passID" multiple="true" id="passesID"&gt;
          &lt;ion-option *ngFor="let pass of passes" value="{{pass}}"&gt;{{pass}}&lt;/ion-option&gt;
        &lt;/ion-select&gt;
    &lt;/ion-item&gt;
    &lt;ion-item  class="curved" *ngIf="todo.get('passID').errors &amp;&amp; todo.get('passID').dirty"&gt;
      &lt;p color="danger" ion-text *ngIf="todo.get('passID').hasError('required')"&gt;*Required&lt;/p&gt;
    &lt;/ion-item&gt;
    &lt;ion-item class="curved"&gt;
      &lt;ion-label&gt;Pass Return Date&lt;/ion-label&gt;
      &lt;ion-datetime displayFormat="DD MMM YYYY " min="2018" max="2030" formControlName="date" multiple="true"&gt;
      &lt;/ion-datetime&gt;
    &lt;/ion-item&gt;
    &lt;div class="ilb"&gt;
      &lt;button class="curvedButton" ion-button block type="Reset"&gt;Reset Form&lt;/button&gt;
      &lt;button class="curvedButton" ion-button block type="submit" [disabled]="!todo.valid"&gt;Create&lt;/button&gt;
    &lt;/div&gt;
  &lt;ion-row style="height: 100px"&gt;&lt;/ion-row&gt;
    &lt;img alt="CC Logo" src="assets/imgs/Global Solutions Center_white.png" class="center" width="100%"&gt;
  </code></pre>