Ion-select-option Customizing Individual Options does not work

I try to embed custom styles to ion-select-option as described here: https://ionicframework.com/docs/api/select-option
I take interface type ‘popover’.
If I use the code snippet (copy from your documentation):

// Pass a custom class to each select interface for styling
const select = document.querySelector('.custom-options');
select.interfaceOptions = {
  cssClass: 'my-custom-interface'
};

following error is shown:

TS2339: Property ‘interfaceOptions’ does not exists on type ‘Element’

I also tried setting PopoverOptions via using @ViewChild-Decorator for access IonSelect component. But PopoverOptions needs a component from type ‘ComponentRef’, and I doesn’t know, where I can get this.

My environment:

Ionic CLI : 6.19.0
Ionic Framework : @ionic/angular 6.1.2
@angular-devkit/build-angular : 12.2.15
@angular-devkit/schematics : 12.2.15
@angular/cli : 12.2.15
@ionic/angular-toolkit : 6.1.0

I am facing the same problem. Did you ever find a solution?

No, I don’t find a solution, I use ion-accordion instead with ion-list in content slot. Then I color the ion-item.

Thanks for the quick response @ebeling. After much investigation and trial-and-error I found a solution that’s working for me. In case anyone else comes along later, I’ll share my solution here.

In the HTML file:
<ion-select interface=‘alert’ [interfaceOptions]=“customSelectOptions”>

In the …page.ts file, at the root of the page class (inside the class but outside of any function):
customSelectOptions: any = {
cssClass: ‘custom-select-options’,
};

In the global.scss file:
.custom-select-options .select-interface-option .alert-radio-label {
color: red;
}

.custom-select-options .select-interface-option[aria-checked=true] .alert-radio-label {
color: red;
}

.custom-select-options .select-interface-option[aria-checked=true] .alert-radio-icon {
border-color: red;
}

.custom-select-options .select-interface-option[aria-checked=true] .alert-radio-inner {
background-color: red;
}

.custom-select-options .alert-button {
color: red;
}

.custom-select-options .alert-title {
color: red;
}

This example colours several features of the ion-select item red, but you could add other style features by editing the corresponding CSS classes in global.css.

Note that there’s no need to include the code snippet that was causing the error in the original post. It is important to put the CSS classes in global.scss (not the …page.scss file).

Summary of the solution:

  • In the page’s HTML file, bind the interfaceOptions property of the ion-select element to a member variable of the page class.
  • In the page’s page.ts file, initialize that member variable as an object containing ‘cssClass’ as a key and some custom class name as its value. Within the same object you could add ‘header’ as a key and some text as its value, and that text would appear in the top bar of the ion-select element.
  • In global.scss, add one or more styles with your custom class as the first selector, and use a descendant combinator to combine it with the class names of the various features in the ion-select item (my example above shows a few of them).

I hope somebody finds this helpful someday!