# How to change the background color in the text and input field of a form

**URL:** <https://forums.pega.com/t/how-to-change-the-background-color-in-the-text-and-input-field-of-a-form/2154>\
**Category:** User Experience\
**Tags:** 8-6, user-experience\
**Created:** [February 1, 2022, 8:55am UTC](https://forums.pega.com/t/how-to-change-the-background-color-in-the-text-and-input-field-of-a-form/2154 "2022-02-01T08:55:42Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![KenshoTsuchihashi](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/kenshotsuchihashi/32/16482_2.png) [@KenshoTsuchihashi](https://forums.pega.com/u/KenshoTsuchihashi)\
**Post date:** [February 1, 2022, 8:55am UTC](https://forums.pega.com/t/how-to-change-the-background-color-in-the-text-and-input-field-of-a-form/2154/1 "2022-02-01T08:55:42Z")

</div>

Hi,

In this post, I will share a couple of approaches to change the background color in the text and input field of a form, as shown below.

 ![Background-color in pink.png](https://pega1.discourse-cdn.com/pega/original/2X/7/7e1ade9d2cd115371aed557eff0477faa6824f30.png)

**1. Skin rule - update the default Field**

This approach can be taken if you are okay that all fields are affected.

1-1. Open up a Skin rule. From Mixins tab, locate _Field_ in Combinations and override it.

 ![Field Override.png](https://pega1.discourse-cdn.com/pega/original/2X/6/6ee56bc707e6a038eb520aa0f23aedeb2c03f012.png)

1-2. Enter your preferred color code in Background Color. In this example, I entered “#FFC0CB”.

 ![Color update.png](https://pega1.discourse-cdn.com/pega/original/2X/f/f7083103c6b62d5a2a43a9720522df1dfe3ebc5e.png)

1-3. That’s it. This modification is applied to all fields.

 ![All fields in pink.png](https://pega1.discourse-cdn.com/pega/original/2X/f/f92c9797c12130f26c477171e8fdd9cc14f8c358.png)

**2. Skin rule - create a new control format**

You may want to selectively change the background color rather than all fields. In that case approach #1 can’t be taken. You’ll need to create your own control format.

2-1. Open up a Skin rule. From Component styles tab, click _Text inputs & Formatted Text_. Do “Save As” _Standard_ to define a new one.

 ![Save As Standard.png](https://pega1.discourse-cdn.com/pega/original/2X/a/a87084cbe6617bff1dbc8132199a9cfda848aa8e.png)

2-2. Give a preferred name. In this example, I named it “Standard 2”.

 ![Standard 2.png](https://pega1.discourse-cdn.com/pega/original/2X/e/e273784827007b41d217d7a168bcd9cdcc31d9a5.png)

2-3. From _Field Background_, add additional styles. In this example, I entered _pink_ for _background-color_.

 ![Standard 2 Settings.png](https://pega1.discourse-cdn.com/pega/original/2X/2/260dccdb84330c2e1d44b61ca6aa4b43cc6b8ea7.png)

2-4. With this approach, you can select which field to apply this control format. Specify “Standard 2” in the cell properties.

 ![Select Standard 2.png](https://pega1.discourse-cdn.com/pega/original/2X/b/bf53183e2fa4ce211a5dabab8e75bd0925d6e032.png)

2-5. The only configured field is affected.

 ![Working.png](https://pega1.discourse-cdn.com/pega/original/2X/7/77897d1c8ec08ef4295e3c4a0ba0babb83cb77a6.png)

**3. JavaScript - using DevTools**

Skin rule is okay as long as the fields you want to change is fixed. If you want to conditionally apply the change, Skin rule approach can’t be taken. In that case, JavaScript is the only solution at moment.

3-1. Launch DevTools and inspect the element. You’ll find a string that looks similar to _input#ac678a23.leftJustifyStyle_. Take a note of that text.

 ![Developer Tool.png](https://pega1.discourse-cdn.com/pega/original/2X/7/717af9e523989b0a81c93605aee4133d59c7221f.png)

3-2. Create a section rule. Turn off _Auto-generated HTML_ checkbox so you can write your own code.

 ![Non Auto-Generated HTML.png](https://pega1.discourse-cdn.com/pega/original/2X/b/b22adc26a5a7d84c57664fa10eb1cb7e8e6d8077.png)

3-3. Write below script in the HTML source. Replace the text _input#ac678a23.leftJustifyStyle_ with yours. Alternatively, you can write the code into _UserWorkForm_ instead of a custom section rule. Either approach is fine.

````auto

```
<style>
  input#ac678a23.leftJustifyStyle { background-color: pink; }
</style>
```

3-4. Include this section rule to where you want to apply changes.

![Embed section rule.png|876x173](upload://h8dFEm5fWtkS0wPEamZUSXymTRN.png)

3-5. At this moment, the change should take effect. Make sure it works. 

![Working.png|956x168](upload://h3to0oRltvvWIx8tWDBAy5qIYU6.png)

3-6. Now, let's conditionize it. Include *<pega:when>* and *</pega:when>* as below. You also need to specify your own When rule. You can also use "Always" (always true) and "Never" (always false) for a quick testing.

```
<style>
  <pega:when name="MyWhenRule">
  input#ac678a23.leftJustifyStyle { background-color: pink; }
  </pega:when>
</style>
```

3-7. Configure the field cell properties. For "Change" event, add "Refresh section" action so every time end users enter the field and move the focus away, the When rule above gets evaluated.

![On Change - Refresh Section.png|708x630](upload://cvPhPgSvip0fxxQs4KLqn6gamWZ.png)

3-8. That's it. Now only if your When rule is evaluated true, the background color should change.

 

**4. JavaScript - using custom class**

Approach #3 requires work for each field. By using custom class, you can simplify your work.

3-1. In the cell properties, define a custom class. The text is arbitrary. In this example, I entered "pinkfield".

![Custom class settings.png|726x210](upload://h6cJqYg1OR6GXK46Pbh6ZADrBne.png)

3-2. In the HTML source, specify custom class as below. Replace the text *pinkfield* with yours. Other syntax stays the same.

```
<style>
  <pega:when name="MyWhenRule">
  .pinkfield input { background-color: pink; }
  </pega:when>
</style>
```

````

3-3. That’s it. If you want to apply the change to other field, the only thing you need to do is to enter the same class name in the cell properties.

Hope this helps.

Thanks,