-
TonerCarAOLcomAsked on July 11, 2014 at 6: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?
-
Jeanette JotForm SupportReplied on July 11, 2014 at 8: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.
-
Jeanette JotForm SupportReplied on July 11, 2014 at 8:17 PM
If you refer to the highlight effect (yellow) , you can disable by following this screen:
-
TonerCarAOLcomReplied on July 11, 2014 at 8: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
-
Welvin Support Team LeadReplied on July 12, 2014 at 2: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
-
TonerCarAOLcomReplied on July 12, 2014 at 9: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
-
CarinaReplied on July 12, 2014 at 9: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.
-
TonerCarAOLcomReplied 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
-
Ashwin JotForm SupportReplied on July 12, 2014 at 2: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!
-
TonerCarAOLcomReplied on July 12, 2014 at 2: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
-
Welvin Support Team LeadReplied on July 12, 2014 at 5:23 PM
Hi Peter,
It's our pleasure to help you. Please let us know if you need any further assistance.
Thanks