# 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:** 1\
**Showing post:** 6

<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)

---

_[View the full topic](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514)._