Formatting options with ion-select interface=modal

Ionic Framework Ionic Vue
1

Hi All

First post!

I am working with Ionic 8 and Vuejs.

I cannot for the life of me figure out how to format the modal background and text on an ion-select with the interface=‘modal’ option?

I have passed in a className via interface-options but nothing seems to work wrt getting the formatting to stick. I have tried the CSS modal shadow classes, etc but it all just fails to change anythign.
I am so utterly confused!

Can anyone please help?

Apples Oranges Bananas .test-css-class { --background: blue; color: red; --height: 50%; --border-radius: 16px; }
2

This should get you started.

<template>
  <ion-list>
    <ion-item>
      <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
        <ion-select-option value="apples">Apples</ion-select-option>
        <ion-select-option value="oranges">Oranges</ion-select-option>
        <ion-select-option value="bananas">Bananas</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
</template>

<style>
.select-modal {
  --height: 50%;
  --border-radius: 16px;
}
.select-modal ion-toolbar {
  --background: blue;
  --color: red;
}
.select-modal ion-content {
  --background: blue;
  --ion-item-background: blue;
}
.select-modal ion-radio::part(label) {
  color: red;
}
</style>

And a working example - Ionic: Format ion-select modal - StackBlitz

3

Works!

Thanks so much for your help. I have had a hard time making sense of the documentation on this.

Much appreciated.

1 Like