# Can't get simple CSS injection to work

**URL:** <https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364>\
**Category:** Ignition\
**Created:** [December 3, 2024, 3:34pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364 "2024-12-03T15:34:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\
**Post date:** [December 3, 2024, 3:34pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/1 "2024-12-03T15:34:22Z")

</div>

Trying to create a knockout effect for a label, where the label text is transparent to reveal the background of the flex container, and the label background is black. No issues doing this with the advanced stylesheet, but I'm not having any luck doing it with CSS injection instead. Client not sold on using advanced stylesheet, so hoping to get CSS injection working.

The stylesheet CSS that works:

```python
.psc-inverted-label {
	color: white;
	background: black;
	mix-blend-mode: multiply;
}

```

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

But when I instead use the backgroundImage style property to inject some CSS, it doesn't work. The extra properties are not showing up in the browser.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bcebe865cd60a849d41322a1f7e947ec311c1eac.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/0/50739e63c91d120d3b58cb0dd3c2fa39bc06ae7b.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/7/d786b25f0cba4569f9a1b2f9b7179e5092203f44.png)

I'm sure I'm missing something obvious...but just can't see it yet. Ideas? @victordcq?

---

<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:** [December 3, 2024, 3:36pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/2 "2024-12-03T15:36:43Z")

</div>

The stylesheet is 100% better than css injection.  
Css injection only works inside a text field inside the perspective style classes ui.  
But i can not see how this would be ever preffered over stylesheet.css; I only ussed this because perspective did not have the stylesheet feature yet.

If you are on a version that can use it. use it.

You can add any css propertiy in perspective styles though even the ones the designer doesnt know.

(Altho newer ones might not work in the designer they will work in the browser)

Though i guess if you only need to add in some simple properties that are not in the style Ui you could indeed add them with injection putting the string you posted inside a class, and assigning the class to the label

---

<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:** [December 3, 2024, 4:08pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/3 "2024-12-03T16:08:03Z")

</div>

> [@David\_Nicks](#):
>
> Client not sold on using advanced stylesheet, so hoping to get CSS injection working.

This is _baffling_ to me. They'd rather use an undocumented, unintentionally supported edge case in our parsing over an officially supported feature built into the software that's explicitly more powerful?

---

<div class="post-metadata">

**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\
**Post date:** [December 3, 2024, 4:24pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/4 "2024-12-03T16:24:07Z")

</div>

I expect to go this route as well. I much prefer the stylesheet for the reasons @victordcq described.

Meanwhile, it still bothers me that the above approach doesn't work...it seems to be exactly as described elsewhere on the forum.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [December 3, 2024, 4:25pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/5 "2024-12-03T16:25:19Z")

</div>

It bothers you that something not supported doesn't work?

---

<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:** [December 4, 2024, 7:51am UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/6 "2024-12-04T07:51:02Z")

</div>

where exactly is this mentioned in the forum? as im pretty sure i always said it should be in a styleclass, or just as seperate properties...

---

<div class="post-metadata">

**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\
**Post date:** [December 4, 2024, 2:33pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/7 "2024-12-04T14:33:39Z")

</div>

It bothers me that something that appears to work for others, which seemed to be a quick fix for a small problem, doesn't work for me, and I'm simply trying to figure out what I'm getting wrong, because I'm detail-oriented and like to understand things. That's all.

---

<div class="post-metadata">

**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\
**Post date:** [December 4, 2024, 2:48pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/8 "2024-12-04T14:48:17Z")

</div>

Had to re-read your previous post a few times and it finally sunk in...I wasn't getting that injection is not required at the component instance level - you simply add the style properties as new values, rather than injecting them. In a class definition, you have to inject because there is no way to add properties to the class definition via the UI.

See, I knew it was something simple I just wasn't seeing up front...

---

<div class="post-metadata">

**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:** [December 4, 2024, 3:01pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/9 "2024-12-04T15:01:18Z")

</div>

> [@David\_Nicks](#):
>
> I'm simply trying to figure out what I'm getting wrong

For what it's worth, if you do the injection with the proper syntax in a style class it does work:

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

Notice the `}{` and the selector?

```python
} .psc-knockout {color:white; background:black; mix-blend-mode:multiply;}{

```

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

Still, use the Stylesheet or add the properties manually.

---

<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:** [December 4, 2024, 3:34pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/10 "2024-12-04T15:34:33Z")

</div>

if you dont use the` }{` you can still add in properties that are not defined in the styleclass ui (like mix-blend) like he did by adding a `;`

So this will work on the class too,

```python
;color: white;	background: black;	mix-blend-mode: multiply;

```

if filled in here

> [@lrose](#):
>
> For what it's worth, if you do the injection with the proper syntax in a style class it does work:
> 
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/10d582916cfee5d364b46b6a7a810729a010c52c.png)

---

<div class="post-metadata">

**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\
**Post date:** [December 4, 2024, 4:22pm UTC](https://forum.inductiveautomation.com/t/cant-get-simple-css-injection-to-work/99364/11 "2024-12-04T16:22:59Z")

</div>

> [@lrose](#):
>
> or add the properties manually.

That was my main mistake.