Change error validation color with CSS on form

  • dinevent
    Asked on July 30, 2019 at 6:46 PM

    Hi JotForm!

    Couple of questions for you...

    With CSS, are you able to help us alter the coloring of the following items: error background, error outline, highlighted background, highlighted textfield outline and asterisk for required questions?

    We are having issues on mobile with the lines not breaking. See attached screenshot.

    Thank you!

    Jotform Thread 1909674 Screenshot
  • Mike
    Replied on July 30, 2019 at 7:34 PM

    Try adding the next CSS to the form:

    /* Field highlight color */
    .form-line-active {
    background-color: #3CB371 !important;
    }
    /* Error highlight color */
    .form-line-error {
    background: #F08080;
    }
    /* Error message box color */
    li.form-line-error .form-error-message {
    background: #DC143C !important;
    }
    li.form-line-error .form-error-message .form-error-arrow {
    border-bottom-color: #DC143C !important;
    }
    /* Error asterisk color */
    .form-required {
    color: #8B0000;
    }
    /* Field label width fix */
    @media only screen and (max-device-width: 900px) {
    .form-label {
    width: initial !important;
    }
    }

    If there is anything else, please let us know.

  • dinevent
    Replied on July 31, 2019 at 11:59 AM

    Thanks, Mike! That is super helpful. I assume the final CSS code, "Field label width fix" pertains to the issues we were experiencing with run off on mobile? Please advise. 

  • Mike_G JotForm Support
    Replied on July 31, 2019 at 1:08 PM

    On behalf of my colleague, Mike, you are most welcome!

    Yes, you are correct. The last part of the CSS codes that my colleague provided is for the issue you are experiencing with the field labels of the fields in your form going off the screen when viewed on mobile.

    /* Field label width fix */
    @media only screen and (max-device-width: 900px) {
    .form-label {
    width: initial !important;
    }
    }

  • dinevent
    Replied on August 7, 2019 at 6:54 PM

    Last question for you - we are trying to change the color of the highlighted text box outline. See attached photo showing outline in blue. What is the CSS to be able to change this detail?1565218477Screen Shot 2019 08 07 at 3 Screenshot 10

  • Kevin Support Team Lead
    Replied on August 7, 2019 at 8:09 PM

    This code can help you changing the outline color on focus: 

    input:focus, textarea:focus, select:focus{

        outline: none !important;

        border-color: green !important;

    }

    I hope this helps.