How can I highlight all fields, when active, the same way?

All of the fields on my form highlight correctly, like this (Business name):

Except for one text area (How can I help?) which retains the original colour border when active:

Form is here: https://form.jotform.com/211742251782049

Many thanks in advance,

Danielle

Hello,

Thank you for reaching out.

Could you add the following code to your CSS? It should do the trick and force the colors to be the same.

.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {

border-color: #a9bff9;

box-shadow: 0 0 0 2px #c9d8fe;

}

Should that not work by default, you can change the two lines by:

    border-color: #a9bff9 !important;

box-shadow: 0 0 0 2px #c9d8fe !important;

Best regards

Hi,

Thanks for the advice.

I'm trying for two settings - the hover settings as below with colour #D1D1F9, then if the item is clicked or an entry is being made, I want border colour #2D3066 and shadow colour #D1D1F9.

I've added this CSS

.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {

  border-color : #D1D1F9 !important;

  box-shadow : 0 0 0 2px #D1D1F9 !important;

}

Plus:

.form-dropdown:active, .form-textarea:active, .form-textbox:active, .signature-wrapper:active {

  border-color : #2D3066 !important;

  box-shadow : 0 0 0 2px #D1D1F9 !important;

}

Now with hover, or if an entry is being made both border & shadow = #D1D1F9 like this;

As I click on the box, I get colour settings for "active" above;

But if I move the cursor away, the border changes to a lighter bright blue;

How do I get the two colour settings I'm looking for - one for hover, and one with the darker border if the box has been clicked or an entry is being made?

Many thanks in advance.

Hello! The focus selector should solve this problem. Please check this form: https://form.jotform.com/211773761909969

If this solves your issue, then you can use the following CSS code:

.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus {

    border-color : #D1D1F9 !important;

    box-shadow : 0 0 0 2px #D1D1F9 !important;

}

In case this doesn't solve your purpose or if you have any further questions, let us know.

Thank you!

That is perfect, thank you!