"Required" data pop-up color changes

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?

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.

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

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

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

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

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.

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

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!

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

Hi Peter,

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

Thanks