I want to change the default colour of the glow/border on focused form fields.
Try and add :focus to your statement…
.form-control:focus {
box-shadow: 0 0 0 0.2rem #000000;
}
P.S- You may need to add !important before the ; if it doesn’t override first time round.
1 Like
The selectors are:
.form-control.is-invalid, .was-validated .form-control:invalid
For the green colour:
.form-control.is-valid, .was-validated .form-control:valid
1 Like
Your knowledge of CSS is awesome Ben
1 Like
The easiest way to answer the question “Which class is this”, for an element you don’t know the exact class is to use the browser console:
Really useful 
3 Likes
Unfortunately that doesn’t work for SPA pages as the HTML isn’t on the page to select. So it doesn’t show up in the styles.
Hi @brad, it should work, at least when using Chrome. Have a look at the following where I am viewing the Contact page:
Hi @ben
Yes, I see that when I inspect a page. But if I am trying to inspect an element such as a form field on a child page it cannot be inspected through the browser webmaster tools.
Not that I do not believe you, but the following is a normal page:
And a SPA page:
No differnce as far as I can see.
Yes, the remarks are all in place.
I stand corrected. It is in there you just have to drill down manually in the code. It does not get selected by simply selecting something on the page. You actually have to go to it in the code. A pain, but it is there.
1 Like