CODEWITHSUNDEEP
csstwitter-bootstrap-3
Denis Steinman
Denis Steinman

Reputation: 7819

Remove the outline around a primary button

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.
Primary button preview

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

Upvotes: 0

Views: 1583

Answers (3)

Mukesh Kumar
Mukesh Kumar

Reputation: 341

Try this:

Worked for me. It's box shadow

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

Upvotes: 1

Marcel Schmid
Marcel Schmid

Reputation: 424

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

Upvotes: 2

Banzay
Banzay

Reputation: 9470

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; }

Upvotes: 1

Related Questions