0

I know the reasons and the nuances for having outline there...I'm asking why this doesn't work:

*:focus {
    outline: none;
}

despite not having outline configured in any other css rules...yet when I use !important it works fine....we're taught to avoid using !important as much as possible because it mucks up the decreasing order of specificity. Wonderful....so how do I walk through my code to figure out what causes this to happen?

Community
  • 1
  • 1
Frankenmint
  • 1,570
  • 3
  • 18
  • 33
  • Open the page in a browser and then look at the JavaScript/CSS console. If another class be overriding this style, then you will see it. – Tim Biegeleisen May 05 '16 at 00:42
  • I did that before resorting to !important....crickets: http://puu.sh/oGAIF/c0b4667320.png ...I also tried searching by outline as well and it's as though the rule is not shown there...yet here it exists...in the source viewer on the inspector: http://puu.sh/oGAPb/c9d67bd862.png – Frankenmint May 05 '16 at 00:45
  • Something else must be overriding the style. – Tim Biegeleisen May 05 '16 at 00:58
  • I'm assuming bootstrap is causing the blue outline? – phteven May 05 '16 at 01:11

1 Answers1

0

If bootstrap is causing the blue outline, then this has worked for me in the past:

.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: #ccc;
}
phteven
  • 1,383
  • 2
  • 16
  • 29