# \[SOLVED\] How would I color individual dropdown labels? Or how would I add an icon to each?

**URL:** <https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364>\
**Category:** Ignition\
**Tags:** perspective, ignition81, scripting\
**Created:** [September 19, 2023, 7:33pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364 "2023-09-19T19:33:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [September 19, 2023, 7:33pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/1 "2023-09-19T19:33:49Z")

</div>

I have a Perspective drop-down component with multiple options (value / label pairs). Is there a way to change the background color of a particular option based off of the label? For example, if I have a label "Workstation1" and want to make that particular selection a red background how would I do that? Alternatively, I would accept adding an icon to various Workstations from the list. I am familiar with CSS injection, and the stylesheet.css, I am just unsure of how to implement the actual color change and/or icon addition.

There are some earlier threads on the forums but they seem to go right from drawing a circle to drawing the owl.

![the_owl](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/572703eef60dcc15ea5878826eef6a925862d5ee.png)

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [September 19, 2023, 7:40pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/2 "2023-09-19T19:40:34Z")

</div>

The post by @victordcq goes into pretty good detail about what CSS to use and where, or are you trying to do something different to this?

> [@Color change on a label](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/6):
>
> man_mage (might need to put in style for translations too, if you have any) .psc-magicColors [data-label="red"]{ background-color:red; } .psc-magicColors [data-label="blue"]{ background-color:blue; } .psc-magicColors [data-label="green"]{ background-color:green; } .psc-magicColorsOptions[data-label="yellow"]{ background-color:yellow; }@mjohnson0238 put this in your stylescheet.css (note the spaceing difference for the options magicColors [data-label and magicColors…

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [September 19, 2023, 7:56pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/3 "2023-09-19T19:56:21Z")

</div>

That worked for me. This link didn't come up in my original search.

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

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

![1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/1677d5d2aefa3cc84035e08e911886fcfd5bcf8e.jpeg)

Is it possible to inject this dynamically at load time however without stylesheet.css? The user that is requesting this is still running 8.1.21 which does not include stylesheet.css

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [September 19, 2023, 8:22pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/4 "2023-09-19T20:22:27Z")

</div>

This is where I get lost.

> [@\[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

I think @victordcq means put the code on the dropdown component binding however it is never stated what binding to put it on.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [September 19, 2023, 8:30pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/5 "2023-09-19T20:30:19Z")

</div>

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:

> [@Javascript inject in Perspective... have fun](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805):
>
> Soo i'll just link this here... You can do whatever with it, but its not really gonna be clean or easy xD Have fun man_mage WARNING Dont let userinput enter in here

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, "YourLabel".

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

Somewhere on the same view, you want a markdown component, it can probably be invisible but in this case I have it visible because I'm just using the existing example:

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

Make sure the `markdown.escapeHtml` prop is set to `false` and the binding you want to set is on the `source` prop:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/d/1d4dacd06759a726fdcf4929503d1ac40f541a47.png)  
The injection payload goes inside the script transform.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [September 19, 2023, 8:44pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/6 "2023-09-19T20:44:16Z")

</div>

You figured it out 3 minutes before me. I had downloaded his project dndjsinject and figured it out finally.

Thank you for your help! I won't repeat your work here since you already added all the screenshots.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 19, 2023, 9:24pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/7 "2023-09-19T21:24:25Z")

</div>

Tip: we don't edit our question titles with [SOLVED]. We're much more discreet and just used the Solved checkbox (which you've correctly done) and it's automatically shown on the forum index.  
Subtle is good!

---

<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:34pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/8 "2024-02-12T20:34:21Z")

</div>

Piggy backing off Felipe\_CRM - I used the method to change background color: [Change color for each option based on some category for Perspective Dropdown Component - #6 by Elizabeth\_Engler](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/6)