How to style .select-text?

Hi everybody,
I´m trying to style the select-text class. Using ion-select I need another color for the selected text. But I can´t overgoing the shadow dom. Could you please show me a solution to style following class in my

.select-text {
  color: green;

Thanks a lot


You can try:

ion-select, select {
color: green

If you want to use your own class, maybe you need to add !important like this:

.select-text {
color: green !important;

Hi Irene,
thanks for your answer.
Yes, that´s true, I can use ion-select but I need a specific class for only one selected text in only one of my components.
I tried !important but doesn´t work. The problem is the shadow dom and I really want to know how other Ionic developers style there app with the new concept of capsulation.
There are some css classes I absolutely can´t style, e.g. .select-text

How do you style your button or text or whatever within a shadow root?

Thanks a lot for every tip!

Hi iondo,

You are welcome!

When I need to style a component I have used what I said you or a specific style using class attribute and I never have had problems. Only I have needed to use !important sometimes.

Have you tried to use Chrome Inspector?


Hi Irene,
yes of cause, the dev tools are my daily best friend.
In my case the problem is that I can´t give the selected text an individual css class because the

is within a shadow root.


Now I found a solution giving the parent element (ion-select) an individual class.

<ion-select multiple="true" class="select-test">

Actually for ion-select the encapsulation of Ionic web components is working. So it seems I only have a changce to change selected text with individual class in parent element.

But I´m not a fan of these solution!

Hi iondo

I’m happy that you have a solution though it isn’t a great solution :slight_smile: