Red Line Around Error Message on File Upload Field

  • Profile Image
    melissa6980
    Asked 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

  • Profile Image
    melissa6980
    Answered on April 02, 2013 at 02:56 AM

    -

  • Profile Image
    EltonCris
    Answered on April 02, 2013 at 07:01 AM

    @melissa6980,

    Use this:

    .form-validation-error {

    box-shadow: none !important;

    }

    Result:

  • Profile Image
    melissa6980
    Answered 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
    sidharth_kch
    Answered 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