# Style of Disabled Components **URL:** \ **Category:** Ignition\ **Tags:** ignition81, vision\ **Created:** [November 1, 2024, 5:16pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056 "2024-11-01T17:16:14Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![MindMusic](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@MindMusic](https://forum.inductiveautomation.com/u/MindMusic)\ **Post date:** [November 1, 2024, 5:16pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056/1 "2024-11-01T17:16:14Z")
Can anyone tell me how to change the style (eg. foreground and background colours) of a component (ie. dropdown list and checkbox) when they're disabled? I want to use the same screen for different roles of user, but make some fields read-only for anyone but management roles... and when I disable those components, they're SO grey that they're hard to read easily. Text boxes have an editable property (which keeps the field easily readable), but these other controls do not seem to have anything similar... Can anyone suggest a way to change this disabled style (or some other workaround)? Using Vision under Ignition 8.1.18 Thanks in advance! 🙂 ---
**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 1, 2024, 5:45pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056/2 "2024-11-01T17:45:02Z")
You can make a disabled style and enabled style and use an expression binding on the styles class property of the component like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c42694637e7d8c4ebf4849851f55631d47fd9c9.png) ---
**Author:** ![MindMusic](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@MindMusic](https://forum.inductiveautomation.com/u/MindMusic)\ **Post date:** [November 1, 2024, 6:30pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056/3 "2024-11-01T18:30:55Z")
Except I'm using Vision... 🙂 ---
**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:** [November 1, 2024, 6:42pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056/4 "2024-11-01T18:42:53Z")
I can't be very specific, but here are the steps I'd take: - identify what css variables are used in the disabled components. Use the dev tools for this. - in the stylesheet, add a css rule that targets disabled components. Something like `[disabled]` should target all of them. If you need to be more specific, ie target only input components, something like `[data-component^=ia.input][disabled]`, or `.ia_dropdown[disabled]` to target only dropdowns. - in that style, edit the different variables used by disabled component to match your needs And that should be enough. Alternatively, if the variables used by disabled components are specific to disabled components (I see there's a `--label-disabled`), the simplest way (and the right way) would be to just override these variables, ie ```css :root { --label-disabled: pink; } ``` You can mix and match these 2 methods (and some others too...) to be as specific of generic as you want/need. edit: Damn, I missed the vision part and you reminded us of this right when I was finishing my post. Eh, sorry, I can't help you there. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [November 1, 2024, 6:48pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056/5 "2024-11-01T18:48:00Z")
You can use the Style Customizer to do this. > **[Vision Component Customizers | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/vision/working-with-vision-components/vision-component-customizer#style-customizer)** > > The Vision module provides a number of customizers to configure components in ways that are more complex or detailed for basic properties. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [November 5, 2024, 8:47pm UTC](https://forum.inductiveautomation.com/t/style-of-disabled-components/98056/6 "2024-11-05T20:47:54Z")
For a checkbox, the text property could be left blank, and a separate label could be used. For opaque components, I imagine the background color could be bound to the enabled property to provide the needed contrast while the component is disabled.