CSS: How to change the input background color when a field is filled out?

Hello Norman_Benjamin,

Thanks for reaching out to Jotform support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Norman_Benjamin, 

To change the input background color when it's filled out, you'll need to add custom CSS code to your form. Let me walk you through it:

First, let's add a placeholder text to your fields to ensure that the CSS code we use will work properly.

1. In your Form Builder, click the gear icon beside the field.
2. Go to the Advanced tab.
3. Type in your desired placeholder text.

1. Copy the code below:

 /* Background color changes when field is filled - 18527471*/;

[data-css-selector="id_37"] input.form-textbox:not(:placeholder-shown) {

    background-color : #FFFF00;

}

/*Code ends here*/

 2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

You can change the hex value in the CSS code depending on your color preference. Checkout the screencast below to see my results:

Give it a try and let us know how it goes.