What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Red Line Around Error Message on File Upload Field

    Asked by melissa6980 on April 01, 2013 at 09:49 PM

    Hi,

     

    I injected some custom css to change the styling of the error messages and I'm pretty happy with the results. The only thing I'd like to figure out yet is how to remove the reddish/pink line that shows up when I get error messages for the multiple file upload button. For instance, if I try to upload a file that is too big or an unaccepted file type I get a red line that goes around the file upload button and the error message beneath it. Please see below screen capture. I'd be really thrilled if I could get rid of the red/pink line. What css would I need to inject to remove that line?

     

    Screen capture of red line around error message

     

    Here's the css I already injected in order to remove the other red lines, arrows and the pink background for the error message in the other fields. I'd like the styling for those to remain the same.:

     

    .form-line-error {

    background: none repeat scroll 0 0 !important;

    }

     

    .form-error-message {

    background:#fff !important;

    width: 185px;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    padding: 1px !important;

    }

     

    .form-error-arrow-inner {

    border-color: transparent !important;

    }

     

    .form-validation-error {

    background-color:#fff;

    border: none;

    -moz-box-shadow:12px #fff;

    -webkit-box-shadow: 12px #fff;

    box-shadow: 12px #fff;

    }

     

    .form-error-arrow {

    width: .1 px;

    height: .1 px;

    border-bottom-color: transparent !important;

    }

     

    .form-required {

    color: red;

    }

     

    .form-line-error input,

    .form-line-error textarea {

    border-color: #ccc !important;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    }

     

    .form-button-error {

    display: none;

    }

     

    Thanks in advance for your help. I appreciate it! Have a great day :)

     

    -Melissa

    upload field message file upload field textarea file type height jpg
  • Profile Image

    Answered by melissa6980 on April 02, 2013 at 02:56 AM

    -

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 02, 2013 at 07:01 AM

    @melissa6980,

    Use this:

    .form-validation-error {

    box-shadow: none !important;

    }

    Result:

  • Profile Image

    Answered by melissa6980 on April 02, 2013 at 08:04 AM

    Great. That worked like a charm. Thank you! :) I forgot about the inspect element tool. Very handy. I appreciate your help.

    -Melissa

  • Profile Image

    Answered by sidharth_kch on April 02, 2013 at 09:02 AM

    Glad to know that your issue was resolved.

    Should you have any questions feel free to contact us.

    Thansk,

    Sidharth