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

Question

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.

Maybe creating a page with the layout you need and presenting it as a modal would be a better approach for this, because I think the ion-select doesn't provide the flexibility that you are looking for. — sebaferreras, May 10 '19 at 09:24
you can change ion-select color as per you show github pages like... `ion-select{ background: black; }`.. and border and Arrow you can customize with CSS — MohammedAli, Jul 11 '19 at 06:03

Ajay Mall · Answer 1 · 2020-04-23T05:35:59.450

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>

Stephen Romero · Answer 2 · 2019-05-09T16:14:34.273

0

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.

edited May 09 '19 at 16:14

answered May 09 '19 at 16:04

Stephen Romero

2,812
4
25
48

not working i want behaviour like . https://github.com/ketanyekale/ionic-color-and-image-selector – Jayprakash Singh May 10 '19 at 05:56

paras shah · Answer 3 · 2019-05-09T08:59:41.870

-2

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

edited May 09 '19 at 08:59

answered May 09 '19 at 07:29

paras shah

861
2
9
23

.alert-radio-group{ background: red !important; } not work – Jayprakash Singh May 09 '19 at 08:35
have you try this at global.css? – paras shah May 09 '19 at 08:59
4

I wouldn't reccomend integrating jquery into this. – Stephen Romero May 09 '19 at 16:12

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

3 Answers3

Ionic v4 and above