# Change color for each option based on some category for Perspective Dropdown Component

**URL:** <https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [August 20, 2020, 4:21pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952 "2020-08-20T16:21:41Z")\
**Posts on this page:** 1\
**Showing post:** 6

<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, 8:30pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/6 "2024-02-12T20:30:41Z")

</div>

I finally figured out how to do it. I used the method shared here:

> [@\[SOLVED\] How would I color individual dropdown labels? Or how would I add an icon to each?](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/5):
>
> I think this is referring to victordcq's js/html injection technique using the markdown component: [https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Markdown](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Markdown) I've never tried it but there's some example projects that might shed some light on how it's done: If I figure out how exactly to use it, I'll reply with more details. Or maybe someone else will chime in. EDIT: I got it working like this. So the injection works on the dropdown option's label value, in this case, "YourL…

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/09ba8de523f3b951e836b109d82da5dc060f1f74.png)

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/561968fff3246fa4e19bc168e12ef379e2ed3b13.png)

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 them to determine if we are running late or on time. Based on the conditions, I set a background color for the option. Then append a styles script for each option to my "styles" variable. I did not have to bind the Markdown component to my dropdown. I'm assuming that the .iaDropdownCommon\_options applies the styles to any dropdown found in the same view? - I'd like clarification on that if anyone knows.. But I'm not sure... just happy that this is working for me!

Also, I set the Markdown component's "display" to false, to hide it from the user.

```auto
def transform(self, value, quality, timestamp):
	styles = ''
	trailersPy = system.dataset.toPyDataSet(self.view.custom.TrailersOnsite)
	for trailer in trailersPy:
			trailerNum = trailer[1]
			lastEdited = trailer[5]
			#Determine if trailer has been checked (green), missed (orange), or late for a check (yellow), or just awaiting a check (white).
			#Trailer Back Color
			trailerBackColor = 'transparent'
			if system.date.minutesBetween(lastEdited, system.date.now()) > 150:
				# Over 2.5 hours since last check. Check was missed.
				# ORANGE
				trailerBackColor = '#F7901D'
			elif system.date.minutesBetween(lastEdited, system.date.now()) > 120 + 15:
				# Over 2 hours and 15 minutes since last check. Check is running late.
				# YELLOW
				trailerBackColor = '#FFF800'
			elif system.date.minutesBetween(lastEdited, system.date.now()) >= 120 - 15:
				# Last check was 1 hour and 45 minutes ago. Needs new check soon. (30 minute window)
				trailerBackColor = 'transparent'
			elif system.date.minutesBetween(lastEdited, system.date.now()) < 120 - 15:
				# Check happened within past 1 hour and 45 minutes. On Time.
				trailerBackColor = '#AAFFA1'
			
# styles = ".iaDropdownCommon_options [data-label='"+ trailerNum +"']:before { content: url('/system/images/Builtin/icons/16/check2.png');	}"
			styles = styles + ".iaDropdownCommon_options [data-label='"+ trailerNum +"'] { background-color: " + trailerBackColor + ";	}"
	
	code = """<style>
		"""+styles+"""
	\"></style>""".replace("\n", "").replace("\t", "")

# Copied and tested from Felipe_CRM's answer:
#	styles=".iaDropdownCommon_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png');	}"
#	styles2=".iaDropdownCommon_options [data-label='Another Label']{ background-color:#AAFFA1}"
#	code = """<style>
# """+styles+styles2+"""
#	\"></style>""".replace("\n", "").replace("\t", "")
	
	return code

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952)._