# Modify textarea

**URL:** <https://forum.inductiveautomation.com/t/modify-textarea/89956>\
**Category:** Ignition\
**Tags:** python, ignition80, perspective, scripting, ignition81\
**Created:** [May 6, 2024, 11:25am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956 "2024-05-06T11:25:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [May 6, 2024, 11:25am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/1 "2024-05-06T11:25:01Z")

</div>

Hello everyone, in a dropdown, I can change the color of the placeholder and I can place an icon before the text. Can I do the exact same thing with a textarea, and if so, how?

I just want a style like this Dropdown:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/85eeba05e0ad5127f001766dbee9b004073a5ff1.png)

---

<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:** [May 6, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/2 "2024-05-06T11:34:27Z")

</div>

Here's one way:

 ![Text Area icon](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b54eac2f76d944d593ced62ebe14195b1d702f51.png)

`backgroundImage : url("/system/images/Builtin/icons/48/logic_and.png")`

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [May 7, 2024, 5:36am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/3 "2024-05-07T05:36:20Z")

</div>

I can change the text color, but can I also change the color of the placeholder? I couldn't find a prop to do that, is there a way to use a background icon instead of an image?

---

<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:** [May 7, 2024, 7:07am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/4 "2024-05-07T07:07:38Z")

</div>

For icon you can use this, note you will need a background size too (even if ignition doenst recognize this style)

```python
url('/data/perspective/icons/material.svg#insert_emoticon')

```

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

for placeholder color you need to add a class and this in the stylesheet.css:

```python
.psc-placeholderRed::placeholder{
	color:red;
}

```

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [May 7, 2024, 7:49am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/5 "2024-05-07T07:49:45Z")

</div>

How can I add a stylesheet.css? I just have these options:

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

And if it is possible i want to change the color of the Icon too.

my props:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/71011615d045e345837abad9f4b8fe658e672e0d.png)

My textfield:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4685272962155c3f74f6025734b27d80a2bda78.png)

---

<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:** [May 7, 2024, 8:44am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/6 "2024-05-07T08:44:02Z")

</div>

Advanced Stylesheet was introduced in 8.1.22.

> **[Style Classes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet)**
>
> A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that...

---

<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:** [May 7, 2024, 8:53am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/7 "2024-05-07T08:53:29Z")

</div>

You need to be on version 8.1.22+ for the stylesheet  
If you really cant upgrade you can use injection

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

```python
} .psc-placeholderColor::placeholder{color:blue}{

```

for the icon color... you could, but you should just create your own icon instead, its gonna be a lot simpler

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [May 10, 2024, 9:45am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/8 "2024-05-10T09:45:11Z")

</div>

I now have version 1.1.25 and was able to customize everything except for the icon color. I searched for the material.svg on my PC but couldn't find it. How can I change the color of the icon or create a new one?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/72623559cc86c1e8c62d044d34f96d6c645ca480.png)

---

<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:** [May 13, 2024, 7:03am UTC](https://forum.inductiveautomation.com/t/modify-textarea/89956/9 "2024-05-13T07:03:51Z")

</div>

this should help you

> **[Images and Icons in Perspective | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/working-with-perspective-components/images-and-icons-in-perspective#use-a-custom-icon-repository)**
>
> Perspective supports the import and display of images, including PNGs, JPGs, JPEGs, GIFs, and SVGs. Images can be loaded into Perspective via the Image Management utility, dragged and dropped directly into a View, or derived from an external web...
