Change Background Color of Specific Element

  • Perlman
    Asked 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

    Jotform Thread 1266608 Screenshot
  • John_Benson
    Replied 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:

    Change Background Color of Specific Element Image 1 Screenshot 20

    Related guide: How-to-Inject-Custom-CSS-Codes

    We'll wait for your response. Thank you.

  • Perlman
    Replied 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_Benson
    Replied 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:

    Change Background Color of Specific Element Image 1 Screenshot 20

    We'll wait for your response. Thank you.

  • Perlman
    Replied on October 6, 2017 at 1:21 PM

    Text box #2.  I am looking for a very light grey.

  • Support_Management Jotform Support
    Replied 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:

    Change Background Color of Specific Element Image 1 Screenshot 20

    Complete guide: How-to-Inject-Custom-CSS-Codes 

  • Perlman
    Replied on October 6, 2017 at 3:04 PM

    Thank you.

    Can I implement the same change to the spinner below?

  • Support_Management Jotform Support
    Replied 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:

    Change Background Color of Specific Element Image 1 Screenshot 20

    If that's what you want, add the following CSS codes:

    #cid_260 {

        background: #eee;

        width: max-content;

        padding: 10px;

    }

  • Perlman
    Replied on October 6, 2017 at 4:41 PM

    Thank you.  I copied pasted the css, but I am ending up with this.

    Change Background Color of Specific Element Image 1 Screenshot 30

    Using this css:

    Change Background Color of Specific Element Image 2 Screenshot 41

  • Support_Management Jotform Support
    Replied on October 6, 2017 at 5:52 PM

    Your form shows the following CSS Codes though:

    Change Background Color of Specific Element Image 1 Screenshot 20

    Please ensure that your CSS selector is #cid_260.

  • Perlman
    Replied 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 Support
    Replied 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.

    Change Background Color of Specific Element Image 1 Screenshot 20

    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.

    https://www.jotform.com/contact/