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

.select-text {
  color: green;
}

Thanks a lot
Timm

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

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

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

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!

<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>
```This does not work: the browser does not like a SPAN element inside the [OPTION element.](https://sandeepdam.blogspot.com)

Is there some other way to style part of an OPTION element's text?

Hi iondo

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