# Background color of disabled textfield

**URL:** <https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [December 8, 2025, 9:02am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677 "2025-12-08T09:02:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanjanakrishnamurthy](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sanjanakrishnamurthy](https://forum.inductiveautomation.com/u/sanjanakrishnamurthy)\
**Post date:** [December 8, 2025, 9:02am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/1 "2025-12-08T09:02:40Z")

</div>

Hi,

Is there any way to change the background color of a disabled text field?

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

---

<div class="post-metadata">

**Author:** ![JVDM](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@JVDM](https://forum.inductiveautomation.com/u/JVDM)\
**Post date:** [December 8, 2025, 12:20pm UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/2 "2025-12-08T12:20:52Z")

</div>

Yes, this is possible.

First, you add the backgroundColor prop through the ‘+’-icon behind the Style property.

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

Then you add an expression binding to the newly added backgroundColor, where the first color is the true value and the second is the false value.

```python
if({this.props.enabled}, "#000000","#FFFFFF")

```

You can test if it works, by manually toggling the Enabled value.

---

<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:** [December 8, 2025, 5:12pm UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/3 "2025-12-08T17:12:55Z")

</div>

Consider using pre-defined colors from [Perspective Built-In Themes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.3/ignition-modules/perspective/styles/perspective-built-in-themes#built-in-theme-colors) or add them to your CSS. This is the way of the web and far more easily maintained than hard-coding colors into components.

---

<div class="post-metadata">

**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:** [December 9, 2025, 2:24am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/4 "2025-12-09T02:24:10Z")

</div>

This should be done by modifying the disabled colour variable via the stylesheet or theme files, not with a binding. This will then affect all textfields, not just one (and it won’t add the unnecessary overhead and configuration of a binding).

E.g.

```python
--input--disabled: hsl(0 0% 80%);

```

if you did want to apply it conditionally, then you can add it into a css rule:

```python
.psc-bob {
    --input--disabled: hsl(0 0% 20%);
}

```

and apply it in the component with: `styles.classes: bob`

(I’d recommend adding bob\*\* as a Perspective Style so that it’s selectable - it doesn’t need to contain anything)

\*\* obviously don’t call your style “bob”… (I’ve reserved that name for myself)

---

<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:** [December 9, 2025, 7:58am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/5 "2025-12-09T07:58:16Z")

</div>

This is the way.

---

<div class="post-metadata">

**Author:** ![sanjanakrishnamurthy](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sanjanakrishnamurthy](https://forum.inductiveautomation.com/u/sanjanakrishnamurthy)\
**Post date:** [December 9, 2025, 11:34am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/6 "2025-12-09T11:34:58Z")

</div>

i’m sorry CSS goes into my head slow. Tried this:

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

But no changes

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

Am i doing anything wrong?

---

<div class="post-metadata">

**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:** [December 9, 2025, 12:29pm UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/7 "2025-12-09T12:29:39Z")

</div>

If you don’t want to attach the change to a style class, then you would need to put it into the root

```python
:root {
   --input--disabled: hsl(0 0% 20%);
}

```

But if you're attaching it to a style class, then it must be prefixed with `psc-` which stands for perspective style class. It's what ignition prefixes all user defined perspective styles with to avoid conflicts with its own default style classe names.

Eg.

```css
.psc-sanj {
    --input--disabled: hsl(0 0% 20%);
}

```

And then you would set the style.classes to sanj in your text field

---

<div class="post-metadata">

**Author:** ![sanjanakrishnamurthy](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sanjanakrishnamurthy](https://forum.inductiveautomation.com/u/sanjanakrishnamurthy)\
**Post date:** [December 10, 2025, 4:03am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/8 "2025-12-10T04:03:14Z")

</div>

Yep, did that.

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/64586ea26b72113ff027379cf5661bbb67346c29.png)

Still no output -

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

---

<div class="post-metadata">

**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:** [December 10, 2025, 4:14am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/9 "2025-12-10T04:14:23Z")

</div>

Did you save the stylesheet? that looks like it should work. have you tried closing and re-opening the view? (you shouldn’t need to do that - although there is a bug in v8.3.1 where you did have to)

also, is the designer in run mode? disabled styling doesn’t show unless in run mode

---

<div class="post-metadata">

**Author:** ![sanjanakrishnamurthy](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sanjanakrishnamurthy](https://forum.inductiveautomation.com/u/sanjanakrishnamurthy)\
**Post date:** [December 10, 2025, 4:20am UTC](https://forum.inductiveautomation.com/t/background-color-of-disabled-textfield/112677/10 "2025-12-10T04:20:20Z")

</div>

yess its working now…probably had not saved properly