Ninja Form, colour of error box not changing

[paxj]

Hi,
I am a beginner. Using a simple contact form in Ninja Form. For the required field, when there is no text, it given an error by putting a symbol, writing a message & changing the border of the box. I have managed to change the colour of the message & Symbol to match my website theme, but I haven’t managed to do the same with the box colour.
I am trying the code:

.nf-error .ninja-forms-field {
border: 1px solid #1a9fb !important;
}

I have tried it with specific errors (.nf-error-9 for e.g.), but no luck. I have also tried

input[aria-invalid=“true”] {
border-color: #1a9fb !important;
}
and
input.error {
border-color: #1a9fb !important;
}

Yet the issue persists. See the screenshot showing a red box

Please help. Thank you.

[lasjorg]

Your hex code #1a9fb is invalid it is missing the last letter/number.

---

Did you inspect the element?

This is how they do it on their blog (I just added an a to the hex code to make it valid) but I’m not sure if you have the same classes or not.

.nf-error .ninja-forms-field {
  border-color: #1a9fba !important;
  transition: all .5s;
}

[paxj]

Yes. I did inspect. In the forum, I pasted the wrong hex code (the correct one is 1a9fb2), but on the site, I have pasted the right one. And I am using this:

.nf-error .ninja-forms-field {
border-color: #1a9fb2 !important;
transition: all .5s;
}

and it’s still showing a red border (default)

If I inspect & change there, it turns blue (the colour I want), yet pasting this in additional css in my wordpress theme hasn’t had any effect. The error message, * for required field & the error symbol (!) I have managed to change to blue (as seen on the screenshot), but not in the box border.

[lasjorg]

If you can change the color in the Inspector you know it works. You either are not using the correct classes in the CSS, have a specificity issue (!important should have fixed that), or have an incorrect cascade (CSS isn’t being applied in the correct order).

Using the Inspector you can tell what the problem is.

In short, there is nothing wrong with the CSS it is how it’s being applied that is the issue. You will have to post a link to the site so we can see what is going on.

[paxj]

bluehaveninv.com
I don’t know what’s the correct class or incorrect cascade - sorry I am a beginner.
I used the inspector - not sure what’s the problem.

[lasjorg]

Try increasing the selector specificity.

#nf-form-2-cont .nf-error .ninja-forms-field {
  border: 1px solid #1a9fb2 !important;
}

The id #nf-form-2-cont may or may not change if you edit the form later. You can always inspect it to see what id it has.

[paxj]

Thank you so much. This worked - I had been spending a lot of time on this to no avail.

[lasjorg]

No problem.

WordPress is easy to use, right up until you have to make changes that require knowledge you do not have. But it is also a pay-for plugin and they have support so I’m guessing they would have helped you if you asked (I would hope).

[paxj]

I used the free version. I did try to contact them; unfortunately no css/customization support for the free version.
Thanks for all your help.