Remove the outline around a primary button

Question

I try to override Bootstrap styles and all works perfect. But I noticed that when the user presses a primary button

<button class="btn btn-primary">Test</button>

It shows an blue outline and I can't remove it. I tried to override a class:

.btn:focus {
  outline: none;
}

But it doesn't work. It still shows this f***ing blue outline. And I can't find where it declared because I am a noobie in CSS.

P.S. If it can help I use the Chrome browser v.56.

try to use `!important`: `.btn:focus { outline: none !important; }` — Banzay, Feb 06 '17 at 08:09
Thank you, guy! You saved my hours. I didn't know that it can be fixed so easy) — Denis Sologub, Feb 06 '17 at 08:10

score 2 · Accepted Answer · edited May 23 '17 at 11:45

2

Not the best way, but try !important.

I guess your bootstrap-styles are loaded after your other styles so you get overwritten.

EDIT: also consider using more precise selector´s would be a better way to go (see comment) also check this

edited May 23 '17 at 11:45

Community

answered Feb 06 '17 at 08:11

Marcel Schmid

Thanks for an explanation! – Denis Sologub Feb 06 '17 at 08:12
1

no problem. Another reason could also be, that bootstrap uses a more precise selector then you do. like: a > btn.focus{ styles }, vs. your style above, would be better if you change your styles and make them more precise then bootstrap, then there is no need to make your styles !important – Marcel Schmid Feb 06 '17 at 08:20
I think you're right! But I realy know a nothing in CSS, guy... I even didn't get about you wrote me. Just I am a server developer and never make a client side early. So, I need to study it in the process. – Denis Sologub Feb 06 '17 at 08:23
1

When I started a friend gave me this: https://flukeout.github.io/ its a little game, showing you on a easy funny way how selectors in CSS work. everything else you need to know about selectors you can easy find all around the web (just check the link in the edit for example). What you should understand for now is that more specific CSS-selectors will overwrite the less specific, and I guess thats the case right here. Maybe you could also inform yourself about LESS or SASS in my opinion those are way easier and also the way to go in a long term! – Marcel Schmid Feb 06 '17 at 08:32

score 1 · Answer 2 · answered Feb 06 '17 at 08:12

1

There are some ways to achieve that. These ways intended to uprise specificity of selector. The easiest way is to use !important for css rule:

.btn:focus { outline: none !important; }

answered Feb 06 '17 at 08:12

Banzay

score 1 · Answer 3 · answered Jan 11 '20 at 00:27

1

Try this:

Worked for me. It's box shadow

.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: unset !important;
}

answered Jan 11 '20 at 00:27

Mukesh Kumar

3 Answers3