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
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!
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}