Styling background color of ion-option


#1

Hey there,

I have an ion-select with some ion-options and i’m trying to set some background color wich depends on the value of the ion-option. So the background of each ion-option might be different (red, blue, orange…).

I tried to add a class to the ion-option, it just doesnt show in the HTML so i can’t style it. So if any of you guys can add a class to that sort of element, let me know !!

Thanks :slight_smile:


#2

The Select docs suggest that you can use an ActionSheet, which has a cssClass attribute for its buttons. I haven’t tried it, but might be worth looking into.


#3

an ActionSheet looks like something that should be use to make an action. Like the example: Share, edit, etc…

But what i’m looking for is to change the background color of my select because i’m still filling up a form.

Thanks for your answer ! :slight_smile:


#4

Hi, I got the same question for that. Did you find out any solution?


#5

Same question here.
[ngStyle], [ngClass], [class], [style] all not working with ion-option


#6

If those don’t work, then I’d think you should be able to target the relevant elements with css selectors.


#7

That is not possible in my case. I have to color the ion-options by
specific value which I get by looping a field on the ion-option.

Well it looks like that I have to create my own directive.

Am 17.05.2017 5:14 vorm. schrieb “Kishore” <ionicframework@discoursemail.com


#8

I don’t know what your particular situation is, but I was playing around with this and could create ion-options with each of them having their own specific background color. It might help you to know that I used the fact that an ion-select component implements the alert interface by default and I could pass it options with a custom class to tag it. Then I could easily target that select and the options it has with some advanced css selectors.

I believe there is still a better way to do it, for example we could give each ion-option its own id so that we don’t have to do much in selecting them with css. But for now this is enough playing around for me :smiley: