I created a form, and some of my input fields, text and sub-button colors are "blind"

  • francinec1
    Asked on September 24, 2018 at 5:05 PM

    I created form https://form.jotform.com/82665772212156

    Some of the text/button background colors and input backgrounds aren't consistent with the rest of

    the form's color scheme.


    This is my page color scheme.

    1537823067color scheme Screenshot 10


    1. Country input selector. You can't see it.

    1537822605Jotform field country Screenshot 21


    2.  See the "Browse Files" and "Print Form Button.  The text/background is a problem as you can't read it.


    1537822698Jotform sub buttons text and b Screenshot 32

    3.  In my product selections, you can't see the selection or input options.


    1537822863Quantity input Screenshot 43


    If there is a way to put in the color in the advance designer using CSS colors, please advise where to put them in.  I looked, but I could not find it.

  • Welvin Support Team Lead
    Replied on September 24, 2018 at 8:40 PM

    It is the custom styling of the dropdown inputs. Please inject the following custom CSS codes to your form to override the current color:

    .form-dropdown {

        border-color: #ffffff;

       background-color: #ffffff;

    }

    Please follow the steps here https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    To fix the print button, please inject the following custom CSS codes:

    .form-submit-print {

        outline: none !important;

        background: #1B1B1A !important;

        box-shadow: none !important;

        border: none !important;

        text-shadow: none !important;

        transition: all .5s ease-in-out;

        -webkit-transition: all .5s ease-in-out;

        -moz-transition: all .5s ease-in-out;

    }

  • francinec1
    Replied on September 25, 2018 at 11:43 AM
    Ok this worked, but the button on the upload is still not readable.
    Do I need a different CSS code to change that as well? I’m fine with the color on this if we can change the font to be black so it’s readable. But, I’d rather it look like the print button for consistency.
    Thank you,
    Francine
    ...
  • Kevin Support Team Lead
    Replied on September 25, 2018 at 1:34 PM

    You may use the same code given for the print button, but replacing the ".form-submit-print" selector with ".qq-upload-button". 

    I have also cloned your form and it shows properly on my end: 

    1537896853screenshot 01 Screenshot 10

    I hope this helps. 

  • francinec1
    Replied on September 25, 2018 at 2:43 PM
    Ok so to be clear you want me to add this to the CSS code and replace the “Print Button” with “qq-upload-button”?
    If not please provide me with the CSS code to enter.
    Thank you
    Francine
    ...
  • francinec1
    Replied on September 25, 2018 at 2:43 PM
    I did what you asked and result is the same.
    https://form.jotform.com/82626894312159
    Not sure what I’m doing wrong.
    Please advise.
    Francine
    ...
  • Victoria_K
    Replied on September 25, 2018 at 4:22 PM

    Hello,

    It appears that you are now using Image Upload Preview widget, so I have injected the code into widget's css area:

    1537906940The Easiest Online Form Builde Screenshot 10

    Please check your form again and let us know if you need any further help.

    Thank you.