# \[BUG\] Perspective Style: Disabled element state not affecting font colour **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [October 1, 2020, 3:22am UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244 "2020-10-01T03:22:42Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [October 1, 2020, 3:22am UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/1 "2020-10-01T03:22:42Z")
v8.1.0rc1 Maybe I’m missing something, but I can’t get the font colour of my buttons to change using a element state in my style when the button is disabled. In the screenshot, the button is disabled with the shown style snippet applied to the `textStyle.classes` property. The disable state should be a light grey, as in the icon, but it’s still a dark blue. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e19e68eaafc08851e4cdf18027f55e12609ef91a.png) ---
**Author:** ![bradley.falzon](https://avatars.discourse-cdn.com/v4/letter/b/e495f1/32.png) [@bradley.falzon](https://forum.inductiveautomation.com/u/bradley.falzon)\ **Post date:** [October 1, 2020, 5:03am UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/2 "2020-10-01T05:03:02Z")
Just tested this myself and just spotted the issue, if you apply it to the `style.classes` property this should work. The `textstyle.classes` applies to the inner `div` element of the button containing the button’s text - but it’s the parent `button` that was actually disabled. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/3168a08fa5114c5090fdc05ec1d02d34eaa6c9da.png) When I moved it to the `style.classes` this worked, and as long as you don’t have any classes in `textStyle.classes` that will overwrite `color` then your text element div should inherit that colour. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [October 1, 2020, 5:06am UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/3 "2020-10-01T05:06:55Z")
Thanks, that works and is more elegant to have all styles defined in the one spot. Not sure why I didn’t try that first… the textStyles must have spoken to my subconscious. I also need to get more acquainted with using the dev tools to help with diagnostics Now I just need to work out how to stop the hover animation when it’s disabled… ---
**Author:** ![Henrique\_Trebilcock](https://avatars.discourse-cdn.com/v4/letter/h/8edcca/32.png) [@Henrique\_Trebilcock](https://forum.inductiveautomation.com/u/Henrique_Trebilcock)\ **Post date:** [March 13, 2024, 4:24pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/4 "2024-03-13T16:24:02Z")
Did you manage to stop hover animation when it's disabled? Do you mind to share 🙂 ---
**Author:** ![Henrique\_Trebilcock](https://avatars.discourse-cdn.com/v4/letter/h/8edcca/32.png) [@Henrique\_Trebilcock](https://forum.inductiveautomation.com/u/Henrique_Trebilcock)\ **Post date:** [March 13, 2024, 4:26pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/5 "2024-03-13T16:26:28Z")
For some reason this is not working for me. I've applied to my style.casses and it does not change. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b960d9cb2e0380fabef52f071f8b83d444c9afca.png) ---
**Author:** ![Samuel\_Porter](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/samuel_porter/32/52836_2.png) [@Samuel\_Porter](https://forum.inductiveautomation.com/u/Samuel_Porter)\ **Post date:** [April 22, 2024, 3:17pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/6 "2024-04-22T15:17:45Z")
Similarly to @Henrique_Trebilcock, simply applying a style class for the disabled state to a button I have does not change any color or border options. Is there something I am missing. Additional data: I do have other bindings on the "text", "textStyle.color", "enabled" and "style.backgroundColor" properties of this Perspective primary button. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/57016fd3dc5cdc43625e4358442c97c99e8c2e94.png) Ideally, I'd like to make this button look like the disabled toggle switch and numeric entry boxes that are grayed out on the screen. Thanks all! ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 4:39pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/7 "2024-04-22T16:39:33Z")
Could you please share the values you've applied in your `Disabled_2_State_Button` class? ---
**Author:** ![Samuel\_Porter](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/samuel_porter/32/52836_2.png) [@Samuel\_Porter](https://forum.inductiveautomation.com/u/Samuel_Porter)\ **Post date:** [April 22, 2024, 5:26pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/8 "2024-04-22T17:26:10Z")
Absolutely! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/3/c3bc5270ac4f19be4a3c70a50cde61cab2d4c66b.png) ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 5:39pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/9 "2024-04-22T17:39:08Z")
If I apply only those settings with the `disabled` element state, I see the expected background color. I don't see the border color because there's no border in use by the button. If you're not seeing the expected values, you're likely running into contention with another class you've applied. Examine the `Styles` tab of the Developer tools to see what value is being used instead - as well as which rule is causing it to be applied. ![Screenshot 2024-04-22 at 10.38.10 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bd94f992136e44218acd2a40a38643e342bcc26d.png) ---
**Author:** ![Samuel\_Porter](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/samuel_porter/32/52836_2.png) [@Samuel\_Porter](https://forum.inductiveautomation.com/u/Samuel_Porter)\ **Post date:** [April 22, 2024, 5:44pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/10 "2024-04-22T17:44:22Z")
> [@cmallonee](#): > > those settings with the `disabled` element s So, interestingly enough, when I uncheck the "border:" check box in the Chrome developer tools, the border comes back and now I can see where it is the proper black color. I'm not super familiar with web development, but I'm assuming where it says "var(--border--disabled);" after it is disabling all borders for some reason. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/3/c350424e759b2ce6636b1e61921681226a84b4e8.png) I will mention, other than the style class previously mentioned above, I have no other items affecting any border properties (or maybe none I know of 😅). ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 6:18pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/11 "2024-04-22T18:18:27Z")
Oh... It's much further down than I anticipated. Do you see the "arrow" attached to that `border` setting? It's an object which contains some rules that are impacting you: ```css border-bottom-style: ; border-bottom-width: ; ``` ![Screenshot 2024-04-22 at 11.12.50 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/65c4f5a3e401b17f1b7be60afe86ee3a0615406b.png) You can see that the border colors applied here are being overwritten later on, but since the border has no width you'll never see it. Your style class must override the border width and border type in order to display the border in this scenario. ![Screenshot 2024-04-22 at 11.16.10 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/88b9b1c524808f431fa06f73d40ff719bd49d983.png) ![Screenshot 2024-04-22 at 11.16.28 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f8b5f8f7ddfafea784091c7e861463722acafdb8.png) ---
**Author:** ![Samuel\_Porter](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/samuel_porter/32/52836_2.png) [@Samuel\_Porter](https://forum.inductiveautomation.com/u/Samuel_Porter)\ **Post date:** [April 22, 2024, 7:07pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/12 "2024-04-22T19:07:05Z")
Okay, so that worked for the border color, but for me, the background color is still not changing. I've been investigating, trying to figure it out (trying to learn CSS on the fly). So, what I'm thinking, is that I do have a binding on "style.backgroundColor" attribute. I think that this is overriding the other background color settings on the style classes. Even when I remove the binding on that attribute, it still stays at the specified static value on the attribute. It's only when I delete the attribute from the PROPS category, does the style class have effect and change the background color. I guess I could use an expression statement with a 3 color selector to drive the background color of this box. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 7:16pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/13 "2024-04-22T19:16:36Z")
> [@Samuel\_Porter](#): > > I do have a binding on "style.backgroundColor" attribute. I can promise you that will do it, because "inline" values take precedence. Binding or not, if you've specified any color other than the default "empty string" value that's the value that will be used. Setting a property value is how you apply a value and _ignore_ any applied CSS. ---
**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:** [April 22, 2024, 11:14pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-style-disabled-element-state-not-affecting-font-colour/39244/14 "2024-04-22T23:14:48Z")
Samuel - a design tip: don't use underline in your HMIs. It's never1 used by professional graphic designers. Check in books, magazines, advertising and professionally designed GUI applications such as Windows, MacOS, Linux etc., except for hyperlinks or to indicate an Alt-hotkey combination. Underlining distorts the shape of the word and cuts through descenders in lowercase letters. 1 Usual disclaimers apply.