Remove default focus outline and change to differe

Question

This question already has answers here:

How to remove outline in bootstrap 4 (7 answers)

Change the blue outglow on input (checkboxes) (bootstrap 4) (2 answers)

Closed 2 years ago.

I'd like to remove the blue outline from my contact box (the color clashes with the other colors on my page). I tried a bunch of things suggested on SO questions to no avail and get the same result on Chrome and Firefox.

Here's what I tried:

input:focus, button:focus, textarea:focus, textarea:focus, input:active, button:active, textarea:active, input:active, input, textarea, button {
  outline-style: none !important;
  outline: none !important;
  outline: 0 !important;
  border: 1px solid #17a2b8; /* Turquoise color */
}

Result:

Answer 1

It's a box-shadow style applied on focus.

add this code to remove it:

.form-control:focus {
   box-shadow:none;
}

You may add !important depending on your CSS order: