How to change background color of the input field? [RESOLVED]

Hello, I’d like to change the background color of the input text field to a slight grey instead of the default white. What CSS code do I need to use?
Thank you

1 Like

You can find the methods to target various inputs in the form here:

You would find the correct element in your form, then change the background-color property for the element to whatever you like.

For example, to target any single line text field and make the background color grey, you could use this:

body .gform_wrapper input[type="text"] {
    background-color: #ADADAD;
}

That CSS can go into your theme stylesheet or you can add it via the Appearance Customizer (Appearance > Customize > Additional CSS).

If you need more assistance, please let us know what you need and share a link to the page on your site where we can see the form. Thank you.

Hmmm. I put that code in the page withe form: Fusion Builder --> Builder --> Custom CSS </> and it didn’t work.

I’m not familiar with Fusion builder, so I am not sure if it should work there or not. If you want to add the custom CSS through Fusion builder, I recommend contacting them to find out the proper format.

Also, if you share a link to the page on your site, and let us know which fields you want to affect, we’ll see what is necessary. Thank you.

https://sweetsmiles.com/virtual_consult/

Similar to how the drag-and-drop background color is a slight grey, I’d like all of the form fields to be slightly grey. Also, how can I move the description of each field closer to the input field? Thank you

Hello Hideki. I added some more specific selectors and additional rules to target the drop down and the textarea as well. This is what I applied to your form:

body div#gform_wrapper_1 div.gform_body input[type="text"],
body div#gform_wrapper_1 select,
body div#gform_wrapper_1 textarea {
    background-color: rgb(114, 132, 156);
    color: white;
}

When applied to your form, it looks like this:

Thank you!

1 Like

Hi! I tried the above solution but it does not affect the phone or email input fields - I tried adding this but it didn’t work either, can anyone advise? Thanks in advance.

I need this style update on form ID 4 only.

body .gform_wrapper_4 input:not([type=“radio”]):not([type=“checkbox”]):not([type=“submit”]):not([type=“button”]):not([type=“image”]):not([type=“file”]),
body .gform_wrapper_4 textarea.textarea, body div.form_saved_message div.form_saved_message_emailform form input[type=“text”] {
background-color: #ffffff;}

Just figured it out:

#gform_wrapper_4 #input_4_5{background-color:#ffffff !important}

1 Like