Change Background Color of Specific Element

  • Profile Image
    Perlman
    Asked on October 06, 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

  • Profile Image
    John_Benson
    Answered on October 06, 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.

  • Profile Image
    Perlman
    Answered on October 06, 2017 at 12:26 PM

    Thank  you,

    I would like to change the background color to the text box below "certified death certificates".

    Spencer

  • Profile Image
    John_Benson
    Answered on October 06, 2017 at 01: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.

  • Profile Image
    Perlman
    Answered on October 06, 2017 at 01:21 PM

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

  • Profile Image
    Jim_R
    Answered on October 06, 2017 at 02: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 

  • Profile Image
    Perlman
    Answered on October 06, 2017 at 03:04 PM

    Thank you.

    Can I implement the same change to the spinner below?

  • Profile Image
    Jim_R
    Answered on October 06, 2017 at 04: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;

    }

  • Profile Image
    Perlman
    Answered on October 06, 2017 at 04:41 PM

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

    Using this css:

  • Profile Image
    Jim_R
    Answered on October 06, 2017 at 05:52 PM

    Your form shows the following CSS Codes though:

    Please ensure that your CSS selector is #cid_260.

  • Profile Image
    Perlman
    Answered on October 06, 2017 at 06: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.



  • Profile Image
    Jim_R
    Answered on October 06, 2017 at 07: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.

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