How Can I Change the Color of the Border When the Input Is On Focus State?

Tried injecting custom CSS, but it's still blue when I input the text.

.form-line-active input:focus, .form-line-active textarea:focus {

border: 1px black !important;

}

input:focus, textarea:focus, select:focus {

outline-offset: 0px !important;

outline: none !important;

}

Hello versahtylestudio,

We are sorry for the inconvenience.

1- Go to your main page

2- Select the form you want to inject custom CSS

3- Click the “Painter” icon on the top-right corner of the page

4-Click on the “Style” tab end then scroll down to the bottom.

5-

A. You can copy the custom CSS style below to remove the “focus” state style.

.form-textbox:focus {

   box-shadow: none;

   border-color: black;

}

B. If you want to remove both of “hover” and “focus” state styles, you should copy the style below.

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

   box-shadow: none;

   border-color: black;

}

6- Click the “Save” button on the bottom right corner.

 You can clone the sample form I prepared for you 

https://form.jotform.com/211641617268052

If you need help on how to clone a form, please check our related guide below:

Clone your form

Please let us know if you need further assistance

Thanks for using JotForm.

Hi,

Thanks! I appreciate your assistance!

Hi,

I have an additional concern.

May I also ask for the CSS style of the following (border color should also be black):

I'd appreciate your immediate assistance. Thanks

Please inject the following custom CSS code in your form to change the focus border color for textarea, textboxe, dropdown and checkbox fields:

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

  box-shadow: none !important;

  border-color: #000 !important;

}

.form-checkbox:hover + label::before {

  box-shadow: none !important;

  border-color: #000 !important;

}

The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

Hope this helps.

Do get back to us if you have any questions.