Styling field validation and error highlighting.

Change color of red outline of email field box when error exists. And also change blue highlight of active field.

Hello friends,

I desire to change two colors:

1.) The red outline of email field box when an error exists

2.) The default blue highlight of each active field

I have tried to inject the following CSS code, however without success. Can you please tell me what I am doing incorrectly?

1.)

.form-validation-error {

border: 1px solid #950f04 !important;

-moz-box-shadow:none !important;

-webkit-box-shadow:none !important;

box-shadow:none !important;

}

2.)

.form-textbox:focus {

border-color:#926138 !important;

}

Please inject the custom css below to change the color of the red outline and the blue highlight of each active field.

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

    border: 1px solid #950f04!important;

}

.form-textbox:focus, .form-textarea:focus {

    border: 1px solid #926138 !important;
    outline: none;

}

Here's a demo form so you can see it in action: https://form.jotform.com/61448196001956 

If you need further assistance, please let us know.

Thank you very much for this help!

However, now another problem exists: When the 'Home Country' field in the second row is selected, the layout changes. Can you please see this strange issue and advise me on what to do?

http://www.pucaraspanishschool.ec/index.php/make-a-reservation

To fix the layout change issue, please use the next CSS:

http://pastebin.com/raw/hVbfT2FS

Form example:

https://form.jotform.com/61457487828976

Thank you.

Hi, I have injected the CSS you provided, however the layout problem still exists when the cursor is placed inside the "Home Country" field, and also now there is an unwanted highlight occurring around the field with an error. Please see:

http://www.pucaraspanishschool.ec/index.php/make-a-reservation

I checked your form and it appears that the css provided by my colleague was not applied to your form. That is why the issue still persists. I have now injected the necessary css to your form so the issue should be resolved. Please check on your end to confirm. If you need further assistance, please let us know.

Thank you so much, the form is now as desired! 

However, I DID inject the custom CSS provided by your colleague....am I not following the correct procedure? I go to From Preferences, Form Styles, and then insert CSS into the bottom box 'Inject Custom CSS.' I see also, that CSS can be injected using the Designer application...which method is correct?

Thanks!

Whichever method that is easy for you. They should both work.

Just make sure to paste the CSS code into the bottom section if you have existing CSS codes in your form.

Cheers!