How to style .select-text?

Ionic Framework ionic-v3
1

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 dashboard.page.scss?

.select-text {
  color: green;
}

Thanks a lot
Timm

2

Hi,

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

3

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!
Timm

4

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?

Irene

5

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.

shadowRoot

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!

7

Hi iondo

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