How to change the background color of the Input Table, and Checklist widget?

  • Profile Image
    lisahumbert
    Asked on August 16, 2018 at 12:46 PM

    https://www.jotform.com/build/82256333706153?iak=931841542fc4ee3f6e0cd024a32a4481-8502a138b200d3b8

     

    Good Morning,

     

    I have sent two other inquiries to find out how to change the color of the input grid. We are considering one of your paid subscriptions, however, I am not getting any response. Will you let me know if you can help me change the color of the input grids from grey to a tan color or something else? Please help.

     

    Thank you,

     

    Lisa Humbert

    Bridge Financial Strategies

    7204013070

  • Profile Image
    Richie_P
    Answered on August 16, 2018 at 02:00 PM

    To change the input grid background color, you can use this custom css.

      .form-textbox{
            background-color:red !important;/*you can change the background color*/
          }

    Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

    Thank you.

  • Profile Image
    lisahumbert
    Answered on August 16, 2018 at 04:43 PM
    Thank you, however, it is the actual grid I am trying to change to a
    different color not the cells. Can we change that? I appreciate the help!
    Lisa Humbert
    Bridge Financial Strategies
    11111 N. Scottsdale Road, Suite 205
    Scottsdale, Arizona 85254






    ...
  • Profile Image
    BDAVID
    Answered on August 16, 2018 at 06:20 PM

    You can change the color of the Input Table fields with this code:

    .form-matrix-row-headers, .form-matrix-column-headers{

        background: "your color" !important;

    }

    .form-matrix-values{

    background: "your color" !important;

    }

    For example, you can try this code to make it all transparent: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-matrix-row-headers, .form-matrix-column-headers, .form-matrix-values{

        background: transparent !important;

    }

    Result:

    1534457041transparent.png

    If you also want to make the Checklist widget transparent, you can inject this code on each widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    .checklist {

        background: transparent !important;

    }

    .checklist label {

        color: white !important;

    }

    Result:

    1534457988result_003.png

    Let us know if you need more help.

  • Profile Image
    lisahumbert
    Answered on August 20, 2018 at 05:43 PM
    Thank you so much! That was successful!
    Lisa Humbert
    Bridge Financial Strategies
    11111 N. Scottsdale Road, Suite 205
    Scottsdale, Arizona 85254






    ...