css 自定义离子选择弹出界面

Posted 2021-05-13

<ion-select [selectOptions]="{cssClass: 'oddHistorySelect'}" interface="popover" [(ngModel)]="currentFallPercentage" (ionChange)="onChangeFallPercentage($event)">
  <ion-option value="30">30</ion-option>
  <ion-option value="40">40</ion-option>
  <ion-option value="50">50</ion-option>
  <ion-option value="60">60</ion-option>
</ion-select>

.oddSetting .popover-content, .oddSetting-eng .popover-content, .selectDividend .popover-content, .selectDividend-eng .popover-content,
.oddHistorySelect .popover-content{

  width: 10.9vw;
  background-color: #91BAE1;
  color:white;
  // margin-top:-1.171875vh;
  @include respond-to(mobile) {
    width:15.9vw !important;
  }

  .item-ios, .item-md, .item-radio-checked.item-ios ion-label, .item-radio-checked.item-md ion-label {
    background:#91BAE1 !important;
    font-size: 1.143rem !important;
    color:white !important;
    font-weight:bold !important;
    text-align: center;
    font-size: 1.57rem !important;
    @include respond-to(mobile) {
      font-size: 1.57rem !important;
    }
  }

  .list-ios .item-block .item-inner, .list-md .item-block .item-inner {
    border:none !important;
  }

  .label-ios, .label-md {
    margin:0px 8px 0 0;
  }

  .item-block {
    min-height:0;
  }

  .radio, .item-radio.item-ios .popover-arrow, .item-radio.item-md .popover-arrow{
    color:white !important;
  }

  .list-ios > .item-block:first-child, .list-ios > .item-block:last-child, .list-ios > .item-wrapper:last-child .item-block,
  .list-md > .item-block:first-child, .list-md > .item-block:last-child, .list-md > .item-wrapper:last-child .item-block {
    border:0;
  }

  .select-popover ion-list {
    padding-top:0.6510416666666667vh !important;
    padding-bottom:0.6510416666666667vh !important;
  }

  .list-ios, .list-md {
    padding-top:0.6510416666666667vh !important;
    padding-bottom:0.6510416666666667vh !important;
  }
}

.oddSetting-eng .popover-content, .selectDividend-eng .popover-content {
  width: 13.9vw !important;
}

.selectDividend .popover-content {
  width:10.9vw !important;
  @include respond-to(mobile) {
    width:15.9vw !important;
  }

  .item-ios, .item-md, .item-radio-checked.item-ios ion-label, .item-radio-checked.item-md ion-label {
    font-size: 1.143rem !important;
    @include respond-to(mobile) {
      font-size: 1.143rem !important;
    }
  }
}

//use these codes when ion-options label are now showing up
.oddSetting .popover-content .popover-viewport{
  opacity: 1 !important;
}
.selectDividend .popover-content .popover-viewport{
  opacity: 1 !important;
}
.oddHistorySelect .popover-content .popover-viewport{
  opacity: 1 !important;
}