"Required" data pop-up color changes

  • Profile Image
    TonerCarAOLcom
    Asked on July 11, 2014 at 06:39 PM

    I have successfully injected CSS code to change the background color of the "required" pop-up textboxes when data is not imputed or imputed correctly. However, I want to change the color of the offending text box outline and I want to change the color of the triangular arrow. How do I this?

  • Profile Image
    Jeanette
    Answered on July 11, 2014 at 08:12 PM

    By offending textbox outline, you mean the red color of the border of the boxes?

    For the arrow, please inject a custom CSS such as this one:

    .form-error-arrow{
    border-bottom-color:#3B5998 !important;
    }

    You can choose the color accordingly , see this color picker to choose your code.

  • Profile Image
    Jeanette
    Answered on July 11, 2014 at 08:17 PM

    If you refer to the highlight effect (yellow) , you can disable by following this screen:

  • Profile Image
    TonerCarAOLcom
    Answered on July 11, 2014 at 08:35 PM

    Hi Jeanette,

     

    Thanks for your prompt reply. I'm actually starting to get the hang of this CSS injection a little bit. The injection for the arrow color change you recommended worked perfectly! I am referring to the red border outline of the boxes. How do I change this color?

    Thanks for all your excellent help

     

    Peter

     

  • Profile Image
    Welvin
    Answered on July 12, 2014 at 02:34 AM

    Hi Peter,

    Use the following custom CSS codes for the border and shadow effect for field errors:

    .form-line-error {

    border: 1px solid #006600 !important;

    -moz-box-shadow: 0 0 3px #006600 !important;

    -webkit-box-shadow: 0 0 3px #006600 !important;

    box-shadow: 0 0 3px #006600 !important;

    }

    Change "#006600" to any color you want. Same guide for injecting the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Let us know if you need any further assistance.

    Thanks

  • Profile Image
    TonerCarAOLcom
    Answered on July 12, 2014 at 09:03 AM

    Hi Welvin,

    Thanks for your help, your prescribed CSS injection works perfectly! You guys really know what you are doing! I need one last bit of help. I need to change the border around the "first name" field box, "last name" field box and "e-mail field box" from red to #006600 green. Can you please prescribe the CSS injection for doing that.

     

    Thanks,

     

    Peter

  • Profile Image
    Carina
    Answered on July 12, 2014 at 09:56 AM

    Please inject the following css code:

    .form-line-error input:not(#coupon-input), .form-line-error textarea {

        border-bottom-color:  #006600;

        border-left-color-value:  #006600;

        border-right-color-value:  #006600;

        border-top-color:  #006600;

        box-shadow: 0 0 3px  #006600;

    }

    .form-line-error input:not(#coupon-input), .form-line-error textarea, .form-validation-error

    {

    border-left-color-value: none;

    border-right-color-value: none;

    }

    Let us know if further support is needed.

  • Profile Image
    TonerCarAOLcom
    Answered on July 12, 2014 at 10:31 AM

    Hi Carina,

    Thanks for your patience with a neophyte. I cut and pasted your CSS code injection recommendation but it had no effect at all that I can observe. Anything I may have missed?

    Thanks again for all your help

     

    Peter

  • Profile Image
    ashwin_d
    Answered on July 12, 2014 at 02:29 PM

    Hello Peter,

    The custom css code shared by my colleague does not have any issue.

    I did check the injected custom css code in your form and found that there was a syntax error. I have updated the injected css code and it seems to be working fine.

    I would suggest you to please test your form and see if it works as expected.

    Thank you!

  • Profile Image
    TonerCarAOLcom
    Answered on July 12, 2014 at 02:34 PM

    Ashwin, 

    Thanks to you and Carina! I checked it and it works great! I really appreciate all your help. Apologize for overlooking the syntax error, thought I had found all of them.

     

    Thanks again,

     

    Peter

  • Profile Image
    Welvin
    Answered on July 12, 2014 at 05:23 PM

    Hi Peter,

    It's our pleasure to help you. Please let us know if you need any further assistance.

    Thanks