Change error validation color with CSS on form

  • Profile Image
    dinevent
    Asked on July 30, 2019 at 06: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!

  • Profile Image
    Mike
    Answered on July 30, 2019 at 07: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.

  • Profile Image
    dinevent
    Answered 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. 

  • Profile Image
    Mike_G
    Answered on July 31, 2019 at 01: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;
    }
    }

  • Profile Image
    dinevent
    Answered on August 07, 2019 at 06: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.49

  • Profile Image
    Kevin_G
    Answered on August 07, 2019 at 08: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.