# Change style of disabled Perspective component(s)

**URL:** <https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [October 31, 2023, 3:57pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238 "2023-10-31T15:57:20Z")\
**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:** [October 31, 2023, 3:57pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/1 "2023-10-31T15:57:20Z")

</div>

I have a confirmation popup screen of dropdown components and text fields. Is it possible to disable the components on the screen and change the color of the text?

I have an edit screen that the user can make changes to including various dropdowns and text fields. The user updates a record and I pass in an original dictionary and new dictionary of values to the confirmation popup screen. If any value in the original dictionary differs from the new dictionary then I want the confirmation screen to show red text instead of normal text. However, I also don't want the user clicking on the dropdown component.

One solution I could do is pass in the actual text of the dropdown instead of the dropdown ID but I wanted to know if there was a quicker way.

One thing I saw in older forum posts is use the following:

> **[Synthetica - Java Look And Feel](https://www.jyloo.com/synthetica/customize/)**
>
> Jyloo Software is a leading Java Look and Feel and Swing component provider. Based on Java Swing technology, Jyloo, JAVASOFT software products are user friendly, come along with a modern look, provide consistency and a high grade of customizability.

but I am not sure how or where to change this on the confirmation popup screen.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 31, 2023, 4:26pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/2 "2023-10-31T16:26:05Z")

</div>

Synthetica is for Java Swing, and therefore specific to **Vision**. It won't help you in Perspective at all.

---

<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:** [October 31, 2023, 4:41pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/3 "2023-10-31T16:41:16Z")

</div>

I don't follow. What's the role of the dropdown ?

---

<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:** [October 31, 2023, 4:53pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/4 "2023-10-31T16:53:25Z")

</div>

So on the original submission screen the user selects values from a dropdown list. The dropdown list is populated by a name query that essentially looks up a UserID and a Username. Instead of passing the Username to the popup confirmation box I am just passing the UserID.

---

<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:** [October 31, 2023, 4:59pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/5 "2023-10-31T16:59:17Z")

</div>

I'm confused, you say here that you don't want the user clicking on the dropdown.

> [@bmeyers](#):
>
> However, I also don't want the user clicking on the dropdown component

How do people select things from it ?

How is the whole thing relevant to the popup ?

---

<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:** [October 31, 2023, 5:01pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/6 "2023-10-31T17:01:42Z")

</div>

The popup isn't really relevant at all to my problem. It is just one of the components on the confirmation screen.

The root problem is I want to disable the popup with the enabled property but also style the text color to be red. It seems I can do either option but not both.

---

<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:** [October 31, 2023, 5:15pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/7 "2023-10-31T17:15:03Z")

</div>

I still have no idea what the whole thing should look like, but it sounds like what you're really asking is "How do I style something that's disabled". Am I close enough ?

for the container:

```css
.ia_dropdown--disabled {
	background-color: blue;
	outline: solid 1px red;
}

```

and for the text inside:

```auto
.ia_dropdown--disabled .iaDropdownCommon_container div {
	color: yellow;
}

```

Paste that in the stylesheet, and play with it to get the style you want.

If you need it to be dynamic, create a style class, use that style class' name in the stylesheet, then give that class to your dropdown dynamically.  
Actually, make the style class anyway, or every disabled dropdown everywhere will get this style.

```css
.psc-disabled_dropdown.ia_dropdown--disabled {
	background-color: blue;
	outline: solid 1px red;
}

.psc-disabled_dropdown.ia_dropdown--disabled .iaDropdownCommon_container div {
	color: yellow;
}

```

Note that there's NO space between the first selectors, we want to target elements with BOTH classes.

Give this class to your dropdowns:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/7/3710262e200b5544f4e1321cae8843582735fc70.png)

---

<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:** [November 9, 2023, 8:33pm UTC](https://forum.inductiveautomation.com/t/change-style-of-disabled-perspective-component-s/81238/8 "2023-11-09T20:33:27Z")

</div>

I got distracted and then didn't have a chance to get back to this for a while.

I am trying this on a version before the advanced stylesheet was available but got it to work with the following steps.

1. Create a style anywhere you want. I put it in a folder.

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

1. Paste following code in the background color.

```auto
}.psc-disabled_dropdown.ia_dropdown--disabled .iaDropdownCommon_container div { color: #FF0000; }{
```

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

1. Disable the dropdown component you want the style applied on and then for the style class put **disabled\_dropdown**.

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

1. Results will appear as expected.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/e/5e86e59a0d1c9f94cd7253262c837800446e0cc2.png)

Thanks @pascal.fragnoud