# Dropdown option style

**URL:** <https://forum.inductiveautomation.com/t/dropdown-option-style/60482>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 8, 2022, 8:38am UTC](https://forum.inductiveautomation.com/t/dropdown-option-style/60482 "2022-06-08T08:38:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![valentin.guichard](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@valentin.guichard](https://forum.inductiveautomation.com/u/valentin.guichard)\
**Post date:** [June 8, 2022, 8:38am UTC](https://forum.inductiveautomation.com/t/dropdown-option-style/60482/1 "2022-06-08T08:38:55Z")

</div>

Hi,  
Is it possible with the dropdown list to have different style for each option ?  
For example :  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bd69006402cc1a69b7b42bf8de10af0d84fe434.png)  
If I get a notification on the line 043001 I would like that the option 043001 be in yellow

Thank you

---

<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:** [June 8, 2022, 10:41am UTC](https://forum.inductiveautomation.com/t/dropdown-option-style/60482/2 "2022-06-08T10:41:58Z")

</div>

kinda but not very practical

> [@Can we give different colors to the options of Perspective Dropdown Component](https://forum.inductiveautomation.com/t/can-we-give-different-colors-to-the-options-of-perspective-dropdown-component/57514/6):
>
> 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…

---

<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:46pm UTC](https://forum.inductiveautomation.com/t/dropdown-option-style/60482/3 "2024-02-12T16:46:51Z")

</div>

I second this. I am trying to set the background color of each option as well based on data for the option.

---

<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:** [September 23, 2024, 10:49pm UTC](https://forum.inductiveautomation.com/t/dropdown-option-style/60482/4 "2024-09-23T22:49:49Z")

</div>

You can use markdown to inject a custom stylesheet element into the page, which can apply styles to each element in the dropdown based on their value:

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

It is fairly straightforward:

1. Give the dropdownOptionsStyle an empty style class, so that you can target the particular dropdown modal (cannot use domId, as it is assigned only to the dropdown component, not the options modal).  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/8/68e6cbdf5e018b34caf9829c6b573f99d0025211.png)

2. Create a new markdown component to inject the `<style>` tag with the appropriate CSS styles. You will need to disable **escapeHtml** and create a binding on the source prop like so.

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

```python
	styleClass = value['targetStyleClass']
	styles = [s.value for s in value['styles']]
	
	css = "\r\n".join([".iaDropdownCommon_options .psc-%s[data-label='%s'] { color:white; background-color: %s;}\r\n\r\n" % (styleClass,v['value'].value,v['color'].value) 
			 for v in styles])
	code = "<style type='text/css'>\r\n %s \r\n</style>" % css
	return code

```