How to remove the red background and the box from the validation error message?

  • paulsutt
    Asked on September 24, 2014 at 3:49 AM

    Many thanks for support given  - Im not a coder but I do like how this form builder works. Ive injected css code as given to alter the requested info alerts - however im still not happy with the red..id like to get rid of the reb boxes and outlines so its just black text.

    So id basically like to ger rid of all the red..and just have the alert text in red (no boxes) if that makes sense?

    The code below is what i was given to inject into css which ive done.

    /* Use this selector to change or remove the soft red background */

    .form-line error {
        background-color: transparent;
    }

    /* Use this selector to style the error boxes */

    .form-error-message {
        background-color: green;
        color: white;
    }

    /* If you wish to remove the icon inside the error boxes */

    .form-error-message img {
        display:none;
    }

    /* To use your own custom error icon
    (make sure to remove the default first) */

    .form-error-message:before {
        content:url("http://image.link.here");
        margin-right:5px;
    }

     

    Jotform Thread 433627 Screenshot
  • Ashwin JotForm Support
    Replied on September 24, 2014 at 9:53 AM

    Hello paulsutt,

    So id basically like to ger rid of all the red..and just have the alert text in red (no boxes) if that makes sense?

    Please inject the following custom css code in your form which will remove the red color boxes, arrow and the warning image from the error message:

    .form-line-error .form-error-message {

    background: transparent;

    color: red;

    padding: 0px;

    margin-bottom: 0px;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }.form-error-arrow {border: 0px solid transparent !important;

    border-bottom-color: transparent !important;

    border-bottom: none !important;

    }

    .form-error-message img {display:none;}

    The output of the above css will be something as displayed in the screenshot below:

    How to remove the red background and the box from the validation error message? Image 1 Screenshot 20

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!