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

    How to remove red border from text boxes

    Asked by AutoRepairHelpUS on December 21, 2013 at 04:11 AM

    I injected the css information and still am having the red outlines in some boxes, see image. I can see the in chrome and Explorer, as well as, jot editing. I have removed form and restarted from scratch, no help. This is what was given to me to inject:

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

    .form-line-error {
    background: none !important;
    }

    .form-line-error input:not(#coupon-input),
    .form-line-error textarea {
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    }

    .form-line-error input:not(#coupon-input),
    .form-line-error textarea,
    .form-validation-error {
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 2px red;
    -webkit-box-shadow: 0 0 2px #eee;
    box-shadow: 0 0 2px #eee;
    }

    Thank you for your help.


    Leon

    Page URL:
    http://www.autorepairhelp.us/ask-a-technician/

    Screenshot
    textarea message validation-error form-line red border
  • Profile Image
    JotForm Support

    Answered by abajan on December 21, 2013 at 06:14 AM

    Leon,

    We're sorry to hear that you're still experiencing this issue. Have any of your clients mentioned the presence of those borders? I'm asking this because to my knowledge none of the JotForm Support team has been able to replicate the problem, either in their own browsers or at Browserstack. Therefore, it's very likely that the red borders are being displayed on your computer only.

    Try the following:

    In the last rule of the injected CSS, remove :not(#coupon-input) from the selector and change red in the second declaration to #eee (so that it matches the value specified in the declarations which follow it).

    Change

    .form-line-error input:not(#coupon-input),
    .form-line-error textarea,
    .form-validation-error {
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 2px red;
    -webkit-box-shadow: 0 0 2px #eee;
    box-shadow: 0 0 2px #eee;
    }

    to

    .form-line-error input,
    .form-line-error textarea,
    .form-validation-error {
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 2px #eee;
    -webkit-box-shadow: 0 0 2px #eee;
    box-shadow: 0 0 2px #eee;
    }

    From what I could tell, there's currently no element in the form bearing an ID of coupon-input. So, if it doesn't exist there's no need to exclude it from being targetted by the rule, which is what :not() does. Insofar as the red is concerned, under normal circumstances the values in all three declarations should match.

    Otherwise, I'm afraid I'm at a loss as to what could be causing the problem.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on December 21, 2013 at 06:24 AM

    Leon,

    Upon viewing the form's source I noticed that the same rule to which I referred is missing a closing brace (curly bracket). You'd better insert it to be on the safe side.


    Thanks