Question

我使用ionic 4并尝试更改背景色ion-select-option。

html。

<div *ngIf="listName.checked" class="colorselect color_{{color.slice(1,7)}}">
        <ion-select (click)="prepareColorSelector()" (ionChange)="setColor(this.color,i)" [(ngModel)]="color">
     <ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" style="background-color:optioncolor">{{optioncolor}}</ion-select-option>
    </ion-select>
</div>

scss。

.colorselect {
    .select-text {
            width: 75px;
            border-radius: 5px;
    }

    .alert-radio-inner,
    .alert-radio-icon,
    .alert-radio-label {
            display: none;
    }

    &.colorselected:before {
            content: '\2713';
            color: white;
            z-index: 999999;
            width: 100%;
            height: 100%;
            font-size: 33px;
            left: 50%;
            top: 50%;
            position: relative;
            transform: translate(-50%);
    }

    $colorsToSelect: "#d435a2" "#a834bf" "#6011cf" "#0d0e81";

    @each $colorOption in $colorsToSelect {
            $colorWithoutHash: str-slice($colorOption, 2, 7);

            &.color_#{$colorWithoutHash} {
                    &, & .select-text {
                            color: #{$colorOption};
                            background-color: #{$colorOption};
                    }
            }
    }
}

背景颜色无法更改。仅使用ion-select-option会出现此问题。有人可以帮助我。

Answer 1

Ionic v4及更高版本
将此添加到您的* global.scss

ion-alert {
  //background color
  .alert-wrapper.sc-ion-alert-md {
    background-color: #f8f4aa;
    --background: linear-gradient(
      to right,
      rgba(255, 0, 0, 0),
      rgba(255, 0, 0, 1)
    );
    box-shadow: inset 0 0 75px rgba(255, 210, 0, 0.3),
      inset 0 0 20px rgba(255, 210, 0, 0.4),
      inset 0 0 30px rgba(220, 120, 0, 0.8);
  }

  // Header Text
  .alert-title.sc-ion-alert-md {
    font-size: 25px;
    font-weight: 600;
    font-family: "AustralisProSwash-Italic";
    color: var(--ion-text-color, #00000080);
  }

  // checkbox border color
  [aria-checked="true"].sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md {
    border-color: #00000080;
  }

  // checkbox or radio button color
  .alert-radio-inner.sc-ion-alert-md {
    background-color: #00000080 !important;
  }

  // wrap the text
  .alert-radio-label.sc-ion-alert-md {
    white-space: pre-line !important;
    font-family: "AustralisProSwash-Italic";
    color: var(--ion-text-color, #000000b3);
    font-weight: bold;
  }

  // Height of text
  .alert-tappable.sc-ion-alert-md {
    height: 77px !important;
  }

  // Checked text color
  [aria-checked="true"].sc-ion-alert-md .alert-radio-label.sc-ion-alert-md {
    color: var(--ion-color-step-850, #262626);
  }

  // Button color
  .alert-button-inner.sc-ion-alert-md {
    color: #00000080;
    font-weight: bold;
    font-size: larger;
  }
}

在您的html文件中

 <ion-col size="12">
    <ion-item class="select_question">
       <ion-label position="floating" class="ion-text-wrap">
          Select Question
        </ion-label>
        <ion-select>
             <ion-select-option>
                 This is Question 1
              </ion-select-option>
               <ion-select-option>
                 This is Question 2
                </ion-select-option>
              </ion-select>
            </ion-item>
        </ion-col>

Answer 2

尝试将其应用于global.css 课

.alert-radio-group { 背景：红色！重要； }

如果它是静态的

您可以使用jquery使其动态化

喜欢

$("#td_id").toggleClass('change_me newClass');

jquery change class name

Answer 3

尝试改用--color: #{$colorOption};和--background: #{$colorOption};。

我在使用按钮时遇到了问题，并且成功了。

如果这不起作用，请尝试。

离子4离子选择选项集的背景色不起作用

3 个答案:

Ionic v4及更高版本