Change signature field's background color to black

  • Gurpreetb
    Asked on July 29, 2021 at 3:03 AM

    Signature box is white colour currently and want to change it to black box like the how my colleague has his form like the picture I've linked below with exactly how it is how I want it on my form except my form has the white signature box and I don't want that the link to my form right now is

    https://form.jotform.com/212017426590248

    1627542182 610252a691bc3 Screen Shot 202 Screenshot 101627542182 610252a69949c Screen Shot 202 Screenshot 21

    Jotform Thread 3252029 Screenshot
  • Billy JotForm Support
    Replied on July 29, 2021 at 7:02 AM

    Hi!

    I hope you're doing well and thanks for reaching out.

    We can change the color of the signature field's background by injecting CSS code. Please use the code below:

    #id_20 {
     background: #161618 !important;
    }

    .jSignature {
     background: #161618 !important;
    }

    .clear-pad-btn {
      color: #000 !important; //color of the 'Clear' text
    }


    Once injected, here's how the signature field would look like:

    1627556421 61028a456e36e  Screenshot 10

    I used the background color of your form so the field would blend in. Feel free to change it though.

    Let us know if you need further assistance.

    Best regards,

  • Gurpreetb
    Replied on July 29, 2021 at 7:33 PM

    i added that css code in the same spot but didn't work

  • Billy JotForm Support
    Replied on July 29, 2021 at 8:38 PM

    I checked your form and the styles have been applied.

    1627605469 610349ddc132d  Screenshot 10

    Please check again and let us know how it goes.

  • Gurpreet
    Replied on July 29, 2021 at 8:41 PM

    The clear button is still white and not how i sent you the first picture everything else is good

  • Billy JotForm Support
    Replied on July 29, 2021 at 9:56 PM

    I see. Replace the .clear-pad-btn code with the code below:

    .clear-pad-btn {
     color: #f1f1f1 !important;
     background-color: #3E3E3E !important;
    }


    Let us know if you need further assistance.

    Best regards,