# Can we give different colors to the options of Perspective Dropdown Component

**URL:** <https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514>\
**Category:** General Discussion\
**Tags:** perspective\
**Created:** [March 23, 2022, 11:04am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514 "2022-03-23T11:04:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhijit\_Patil](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Abhijit\_Patil](https://forum.inductiveautomation.com/u/Abhijit_Patil)\
**Post date:** [March 23, 2022, 11:04am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/1 "2022-03-23T11:04:29Z")

</div>

Hello,

I have requirement that I have to change the color of the options from the dropdown, which the operator attended earlier. Is there any way to do that?  
Ignition Version : 8.1.0

Thanks.

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [March 23, 2022, 5:41pm UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/2 "2022-03-23T17:41:15Z")

</div>

Are you using Vision or Perspective

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [March 24, 2022, 2:24am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/3 "2022-03-24T02:24:49Z")

</div>

Do you mean this?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c95d613bf52e9559869b2be379ae2d67d08216ef.png)

If you mean different colors for the individual options then i don’t think so. Possibly with CSS but I am a total novice when it comes to CSS, maybe one of those CSS wizards like @victordcq can tell us.

---

<div class="post-metadata">

**Author:** ![Abhijit\_Patil](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Abhijit\_Patil](https://forum.inductiveautomation.com/u/Abhijit_Patil)\
**Post date:** [March 24, 2022, 5:29am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/4 "2022-03-24T05:29:54Z")

</div>

I am using Perspective.

---

<div class="post-metadata">

**Author:** ![Abhijit\_Patil](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Abhijit\_Patil](https://forum.inductiveautomation.com/u/Abhijit_Patil)\
**Post date:** [March 24, 2022, 5:38am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/5 "2022-03-24T05:38:49Z")

</div>

Thanks for the reply.

dropdownOptionStyle (the image you shared) its applying color to all the options in the dropdown.  
We want to color only specific options, which are attended earlier. We have data of previously attended options.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 24, 2022, 8:23am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/6 "2022-03-24T08:23:17Z")

</div>

Unfortunatly the css selector :visited doesnt seem work because the dropdown gets removed by igntion when it closes. or there are no links attachted to the options

Now you could i suppose put a binding on dropdownOptionStyle.classes  
and create a bunch of classes like so DropDownHighlight1 with then a theme.css to use the nthcheild selector

However… you will have to make a bunch of styles for every possible selection and make the binding selected the right classes…

Not to bad for a few option, but still a bunch of copypaste work if you have many options. So good luck with that xd Atleast it will work for every dropdown if you select the style So it would only be a lot of work once (apart from the logic to select the correct styleclass)

```auto
.psc-DropDownHighlight1:nth-child(1){
background-color:red;
}
.psc-DropDownHighlight2:nth-child(2){
background-color:red;
}
.psc-DropDownHighlight3:nth-child(3){
background-color:red;
}

```

you can either let your binding select both classes or create a class that selects both xd  
I suppose it might be more logical in the binding, also less work than created classes for every combination

.

```auto
psc-DropDownHighlight1and3:nth-child(1), .psc-DropDownHighlight1and3:nth-child(3){
background-color:red;
}

```

Also note that you dont need to create the styleclasses in the designer,  
aslong as the names match the css selector  
in this case styleclass **DropDownHighlight1** (and 2) does not have to exist in the designer  
the expression on the style.classes would have to return a string where every class is seperated by a space  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/d/add9e8f60d0d116c0fa2f617ad372f413d62347c.png)

---

<div class="post-metadata">

**Author:** ![Abhijit\_Patil](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@Abhijit\_Patil](https://forum.inductiveautomation.com/u/Abhijit_Patil)\
**Post date:** [March 25, 2022, 6:15am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/7 "2022-03-25T06:15:27Z")

</div>

Thanks @victordcq , I really appreciate your help.

For time being I provided temporary solution as checkbox emoji (✔) for attended options.  
In coming time I will definitely work on the solution you provided.

Thanks.

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 12, 2024, 4:45pm UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/8 "2024-02-12T16:45:43Z")

</div>

I am trying to do this as well. Make some options green, some yellow, and some white. Even when I set a binding to backgroundColor, it does not change for each option.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c24d537ec688eb4e31afde34807edd1737cefa73.png)

---

<div class="post-metadata">

**Author:** ![simeonw](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@simeonw](https://forum.inductiveautomation.com/u/simeonw)\
**Post date:** [July 18, 2024, 11:33pm UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/9 "2024-07-18T23:33:25Z")

</div>

If you want different a color for each option element, then you can remove the background color, create an empty style class (i.e. "MyDropDown") and add it to the dropdownOptionsStyle.

Then make the changes to your custom stylesheet like @victordcq suggested:

```python
.psc-MyDropDown:nth-child(1){
background-color:red;
}
.psc-MyDropDown:nth-child(2){
background-color:green;
}
.psc-MyDropDown:nth-child(3){
background-color:blue;
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd9b524324ce5a0fc42deec6f83c7b8dfa2ae8ca.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 19, 2024, 6:53am UTC](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/10 "2024-07-19T06:53:16Z")

</div>

if you need specifiek colors for specifiek values, you could also use javascript to inject the correct styles based on some content.

> [@\[FEATURE\] Add ability to add Icon and styling to Perspective Dropdown items](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/2):
>
> put this in the markdown component binding like usual you'll ofc will have to add some python logic to append the style string based on the required labels in de dropdown (idk if everyone has these Builtin/icons or is it from my test project?) styles=".iaDropdownCommon\_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png'); }" code = """\<style\> """+styles+""" \"\>\</style\>""".replace("\n", "").replace("\t", "") return code

> [@Change color for each option based on some category for Perspective Dropdown Component](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/6):
>
> I finally figured out how to do it. I used the method shared here: In their solution, they were able to set a specific style for each drop down option, adding a checkmark image to certain options. I just modified it to add on to the "styles" variable for each option, and set a background-color rather than adding content. [image] I'm using a list of options that I get from my database (it changes all the time). I loop through these options and check a time variable for the…