How to change the border color when fields are interacted with

Hi. I have a question. I would like to change the color of the highlight for the input fields on my form. I would like it to be Red instead of Blue. I have tried CSS code I have found on the internet but it doesn't seem to work. Can you help please? Thank you in advance.

Hi Stuart,

Thanks for reaching out to Jotform Support. You can easily change the border color of the fields to red when they're focused by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*thread 29673691 - border and shadows must be red*/

.form-textbox:focus,

.form-dropdown:focus,

.form-textarea:focus,

.form-textbox:hover,

.form-dropdown:hover,

.form-textarea:hover{

   border-color: red!important;

   box-shadow: 0 0 0 3px hsl(0 100% 50% / 50%)!important;

}

/*ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out the screencast below to see how it works on a cloned form now:

Give it a try and let us know how it goes.

You're amazing John, thank you!