# Color change on a label

**URL:** <https://forum.inductiveautomation.com/t/color-change-on-a-label/79165>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [September 14, 2023, 3:28pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165 "2023-09-14T15:28:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [September 14, 2023, 3:28pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/1 "2023-09-14T15:28:53Z")

</div>

Is there a way on a label, that is being feed from a multi select dropdown, to have each values be a different color?

Eample:

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

Could I make the red be a red color, etc?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [September 14, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/2 "2023-09-14T15:34:11Z")

</div>

Not with the label component itself, but you should be able to do this with the markdown component injecting `<span>` or similar elements with custom styles.

Or someone like @victordcq will correct me with some magical CSS way to do it 🙂

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 14, 2023, 4:16pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/3 "2023-09-14T16:16:22Z")

</div>

The simplest way I can see of doing this... is to use a repeater to dynamically repeat labels, and style each instances however you like.  
Do you NEED all the strings to be in the same label ?

---

<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 14, 2023, 6:56pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/4 "2023-09-14T18:56:54Z")

</div>

For Markdown syntax see

> **[Hacks | Markdown Guide](https://www.markdownguide.org/hacks/#color)**
>
> Workarounds for things not officially supported by Markdown.

It's probably not worth the trouble.

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [September 14, 2023, 8:13pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/5 "2023-09-14T20:13:24Z")

</div>

Yeah I was asking around. I didnt think it would be a easy enough thing to do,

---

<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:** [September 15, 2023, 6:49am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/6 "2023-09-15T06:49:44Z")

</div>

🧙‍♂️ (might need to put in style for translations too, if you have any)

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

```auto
.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

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

(note the spaceing difference for the options magicColo**rs [da**ta-label and magicColorsOptio**ns[da**ta-labe, so you need to make one per color for both for options and selected)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 15, 2023, 7:05am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/7 "2023-09-15T07:05:04Z")

</div>

I think he was asking how to color a label bound to the dropdown, not the little things in the dropdown itself.

---

<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:** [September 15, 2023, 7:13am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/8 "2023-09-15T07:13:10Z")

</div>

ah oops, there is a potential solution with css using lineargradients.. but you are better of with a markdown or whatever

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 15, 2023, 7:14am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/9 "2023-09-15T07:14:57Z")

</div>

I stand by my flex repeater suggestion ;p

> **view json**
>
> ```json
> {
> "custom": {
> "ds": {
> "$": [
> "ds",
> 192,
> 1693829765201
> ],
> "$columns": [
> {
> "data": [
> 11,
> 22,
> 33,
> 44,
> 55,
> 66,
> 11
> ],
> "name": "id",
> "type": "Integer"
> },
> {
> "data": [
> "A",
> "B",
> "C",
> "A",
> "D",
> "A",
> "B"
> ],
> "name": "loc",
> "type": "String"
> }
> ]
> },
> "foo": 21
> },
> "params": {
> "category_id": "",
> "family_id": "",
> "item_id": ""
> },
> "propConfig": {
> "custom.ds": {
> "binding": {
> "config": {
> "expression": "true"
> },
> "enabled": false,
> "transforms": [
> {
> "code": "\treturn system.dataset.toDataSet(\n\t\t[\u0027id\u0027, \u0027loc\u0027],\n\t\t[\n\t\t\t[11, \u0027A\u0027],\n\t\t\t[22, \u0027B\u0027],\n\t\t\t[33, \u0027C\u0027],\n\t\t\t[44, \u0027A\u0027],\n\t\t\t[55, \u0027D\u0027],\n\t\t\t[66, \u0027A\u0027],\n\t\t\t[11, \u0027B\u0027]\n\t\t]\n\t)",
> "type": "script"
> }
> ],
> "type": "expr"
> },
> "persistent": true
> },
> "custom.foo": {
> "persistent": true
> },
> "custom.isFresh": {
> "access": "PRIVATE"
> },
> "params.category_id": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.family_id": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.item_id": {
> "paramDirection": "input",
> "persistent": true
> }
> },
> "props": {
> "defaultSize": {
> "height": 970,
> "width": 1171
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "Dropdown"
> },
> "position": {
> "basis": "36px"
> },
> "propConfig": {
> "props.options": {
> "binding": {
> "config": {
> "expression": "true"
> },
> "transforms": [
> {
> "code": "\tcolors \u003d [\u0027red\u0027, \u0027blue\u0027, \u0027green\u0027, \u0027yellow\u0027]\n\treturn [\n\t\t{\n\t\t\t\u0027label\u0027: c,\n\t\t\t\u0027value\u0027: {\u0027text\u0027: c, \u0027color\u0027:c}\n\t\t} for c in colors\n\t]",
> "type": "script"
> }
> ],
> "type": "expr"
> }
> }
> },
> "props": {
> "multiSelect": true,
> "value": [
> {
> "color": "blue",
> "text": "blue"
> },
> {
> "color": "red",
> "text": "red"
> },
> {
> "color": "green",
> "text": "green"
> }
> ]
> },
> "type": "ia.input.dropdown"
> },
> {
> "meta": {
> "name": "FlexRepeater"
> },
> "position": {
> "basis": "32px"
> },
> "propConfig": {
> "props.instances": {
> "binding": {
> "config": {
> "path": "../Dropdown.props.value"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "elementPosition": {
> "basis": "auto",
> "grow": 0
> },
> "path": "sandbox/repeated_label",
> "style": {
> "gap": "3px",
> "overflow": "hidden"
> },
> "useDefaultViewHeight": false,
> "useDefaultViewWidth": false
> },
> "type": "ia.display.flex-repeater"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column",
> "style": {
> "gap": "10px",
> "padding": "15px"
> }
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

---

<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:** [September 15, 2023, 7:33am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/10 "2023-09-15T07:33:24Z")

</div>

or just display the dropdown, with my styling and disable it so they cant change it

---

<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:33pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/11 "2024-02-12T20:33:45Z")

</div>

Piggy backing off another solution I found:

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

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 26, 2024, 6:32pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/12 "2024-03-26T18:32:40Z")

</div>

I expect something in a style sheet is messing up my page.

So I tried the to do the small footprint technique,  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1bc88811c2084c6b401ef08b1a43888f1c260bfb.png)  
It doesn't work though. Not sure why.

Issue:

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

Tried to figure it out at the browser.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/7/a78d68c87293f4b8430980b3dd4e60d4630c509a.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d8882ba2ec1f979499738e3bc3729fe20bf1b7a6.png)  
I just don't know how to override it.

---

<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 27, 2024, 7:39am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/13 "2024-03-27T07:39:45Z")

</div>

What are you expecting to see?  
you got to close and reopen the view sometimes for ccs to take effect

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 12:46pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/14 "2024-03-27T12:46:50Z")

</div>

The color of the pills and background never changed for me.  
I am on 8.1.30.

Tried this in the background image area, didn't work.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/822113dfadfc720cc11f4e338859948f8e7242c7.png)

I require help with the style sheet technique.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/49e3a299e646f6eff219e1a3ae6b382e195f94be.png)

I can't seem to find anything on the Ignition style sheet in the manual.  
Might be me or the new manual.

---

<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 27, 2024, 1:22pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/15 "2024-03-27T13:22:01Z")

</div>

> [@Zach\_Larson](#):
>
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/49e3a299e646f6eff219e1a3ae6b382e195f94be.png)

you can not nest selectors  
you wrapper the dropdown styles in .psc-smartsheets, that is not possible

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 1:22pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/16 "2024-03-27T13:22:24Z")

</div>

I don't know what that means.

Where do I learn how to do this?  
Where is this in the manual?  
Or can you show me?

---

<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 27, 2024, 1:23pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/17 "2024-03-27T13:23:05Z")

</div>

remove `.psc-smartsheets-dropdowns{`  
and the last` }`

This is how css works, has nothing to do with ignition

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 1:27pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/18 "2024-03-27T13:27:24Z")

</div>

I need to specify a style.  
I don't want to set this for all the other pages other people have made.

---

<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 27, 2024, 1:31pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/19 "2024-03-27T13:31:01Z")

</div>

then you gotta do it like this

without the label if you dont need it

> [@victordcq](#):
>
> 🧙‍♂️ (might need to put in style for translations too, if you have any)
> 
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/0/50f6053ff7e25030a74efc34a317b4c188e9f525.png)
> 
> ```auto
> .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
> 
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b5c11cf167c288f095430a4348ab30b229c52fc6.png)
> 
> (note the spaceing difference for the options magicColo**rs [da**ta-label and magicColorsOptio**ns[da**ta-labe, so you need to make one per color for both for options and selected)

ofc

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 1:32pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/20 "2024-03-27T13:32:08Z")

</div>

I don't know what the text will be.

I have a query binding for the values and labels.  
I want them all to be one color, an don't know what the text will be.

[Next page](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165.md?page=2)