-
PerlmanAsked on October 6, 2017 at 11:03 AM
Hello,
I'm having difficulty changing the the background color of a single element (text box).
Can you show me how to do this in form designer?
Thank you,
Spencer
Page URL: https://form.jotform.com/72765272602154 -
John_BensonReplied on October 6, 2017 at 11:53 AM
You cannot change the background color of a specific element using the Advanced Designer. You can accomplish that by adding custom CSS code to your form.
Let us know what is the specific element you want to change the background color and we will guide you on how to get it.
Here's an example:
Related guide: How-to-Inject-Custom-CSS-Codes
We'll wait for your response. Thank you.
-
PerlmanReplied on October 6, 2017 at 12:26 PM
Thank you,
I would like to change the background color to the text box below "certified death certificates".
Spencer
-
John_BensonReplied on October 6, 2017 at 1:03 PM
What background color do you prefer?
Also, could you please what text box you're referring to? See image below:
We'll wait for your response. Thank you.
-
PerlmanReplied on October 6, 2017 at 1:21 PM
Text box #2. I am looking for a very light grey.
-
Support_Management Jotform SupportReplied on October 6, 2017 at 2:42 PM
Thank you Spencer - Use the following CSS codes to change its background to lightgray:
div#cid_255 {
background: #eee;
}
Result:
Complete guide: How-to-Inject-Custom-CSS-Codes
-
PerlmanReplied on October 6, 2017 at 3:04 PM
Thank you.
Can I implement the same change to the spinner below?
-
Support_Management Jotform SupportReplied on October 6, 2017 at 4:19 PM
Sure you can - But I'm not sure how you want it to look like. So, I'll just assume you wanted it to look like this:
If that's what you want, add the following CSS codes:
#cid_260 {
background: #eee;
width: max-content;
padding: 10px;
}
-
PerlmanReplied on October 6, 2017 at 4:41 PM
Thank you. I copied pasted the css, but I am ending up with this.
Using this css:
-
Support_Management Jotform SupportReplied on October 6, 2017 at 5:52 PM
Your form shows the following CSS Codes though:
Please ensure that your CSS selector is #cid_260.
-
PerlmanReplied on October 6, 2017 at 6:04 PM
Thank you. I was trying different things after your last response.
There may be an issue with editing in Firefox. I am having difficulty with random elements. Just a FYI.
-
Support_Management Jotform SupportReplied on October 6, 2017 at 7:30 PM
I was trying different things after your last response.
No worries - Just make sure you will click the green SAVE button at the bottom of the CSS tab whenever you're making changes.
I am having difficulty with random elements.
I recommend you open a new thread for this if you could provide a more detailed description on what those random elements are so we can help you.