CODEWITHSUNDEEP
angularionic-frameworkionic4
Jayprakash Singh
Jayprakash Singh

Reputation: 1373

ionic 4 ion-select-option set of background-color not working

I use ionic 4 and trying to change background-color 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};
                    }
            }
    }
}

The background-color can't change. this problem only with ion-select-option.someone can help me.

Upvotes: 7

Views: 9689

Answers (3)

Ajay Mall
Ajay Mall

Reputation: 59

  • Ionic v4 and above

  • add this in your* 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;
  }
}
  • In your html file
 <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>

Upvotes: 5

Stephen Romero
Stephen Romero

Reputation: 3022

Try using --color: #{$colorOption}; and --background: #{$colorOption}; instead.

I had this issue with buttons and that did the trick.

If that doesn't work, try this.

Upvotes: 1

paras shah
paras shah

Reputation: 889

Try to apply it on global.css class

.alert-radio-group{ background: red !important; }

If it works statically

You can make it dynamic using jquery

like 

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

jquery change class name

Upvotes: -2

Related Questions