Changing color and background color of ion-option

Ionic Framework ionic-v3
1

Hi,

is there any way to change color and background color of ion-option in ion-select dynamically?

Something likes:
image
or
image
but they do not work.

ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.2.1 Build version 8C1002

2

Did you try:

<ion-option [style]="{ color: color1, backgroundColor: color2 }">Hello</ion-option>

Also you could do it like this:

<ion-option [style]="style_variable">Hello</ion-option>

and then define style_variable in your controller/component:

style_variable = { color: color1, backgroundColor: color2 }

Note that you have to use Javascript names for the CSS. So background-color becomes backgroundColor, etc.

1 Like
3

I tried your case but I got the error: Attempted to assign readonly property.

Did you get success using [style] in ion-option?

4

Oops, [style] isn’t right, you have to use [ngStyle]…

<ion-option [ngStyle]="{ color: color1, backgroundColor: color2 }">Hello</ion-option>
or
<ion-option [ngStyle]="style_variable">Hello</ion-option>

Sorry, I didn’t check my code. Other variables like [src] are generally the same but style is different.

1 Like
5

So sad, It is still not working.

I also had tried this:
image
but failed. The options have no any changes as default.

The ion-option in ion-select actually is converted into button list inside a alert box according to the document. So the style of it cannot be changed directly. It seems ionic 2 team does not provide that properties to change the style of ion-option dynamically.

1 Like
6

Is it possible to change the style of ion-option dynamically? It seems this is a simple feature. @mhartington

7

Looks like the problem is ion-option doesn’t actually get rendered, it just creates a list that populates the popup alert. You might have to create your own popup based on the AlertController, it would be a lot of work. Seems like something that should work, but in the AlertController, inputs don’t have a color or css option… :head_bandage:

8

The latest docs (see the “style binding”) section use “style”.

2 Likes
9

Yes. that is how I did at the beginning but it does not work on ion-option.

10

@ionicthemes any update on same ?

11

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;
  }
}
3 Likes