6

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:

Result

nCardot
  • 5,992
  • 6
  • 47
  • 83

1 Answers1

9

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

enter image description here

add this code to remove it:

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

You may add !important depending on your CSS order:

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • We should add that you shouldn't remove it for accessibility reasons, you should change it to suit your site's style but it should remain visible. – Michael Liquori Dec 18 '19 at 02:54