Change blue frame around buttons in CSS

Question

I'm having a problem with styling Bootstrap buttons when I want to change/remove blue frame around them after they've been clicked. Here's the case:

I've already seen many posts regarding this issue, and almost every one of them concludes with "use outline:none". For some reason, this isn't working for me. CSS code:

    .btn {
    color: white;
    border-radius: 0px;
    background-color:rgba(124, 122, 119, 0.405);
    border-color: rgba(255, 165, 0, 0.405);
    margin: 15px;
    max-width: 30%;
    max-height: 30%;
    outline: 0;
}

.btn:hover{
    border-color: white;
    background-color: rgba(190, 123, 34, 0.514);
    outline: 0;
}

.btn:focus{
    border-color: white;
    background-color: rgba(255, 166, 0, 0.418);
    outline: none;
    border: 0;
}

.btn:active {
    border: 0;
    outline: 0;
}

As you can see, I've blindlessly put the outline property everywhere, mixing it's every possibility with trial and error method. Still nothing. Here's my HTML code for this button if you find it useful:

<button type="button" class="btn btn-primary" (click)="decrementStep()">Back</button>

Also, would be nice if you could tell me how to change button's background color when its being clicked, for some reason it doesn't work for me either. I think the problem's reason lies somewhere within Bootstrap, but I'm totally new to frontend and just a beginner with it. Also, if it matters, I'm using Angular. Thanks in advance.

YOLO, just add *:focus { outline: none } to your global stylesheet :P — Zlatko, Feb 23 '18 at 15:58
do **not** add `!important`. It's not the correct way of solving this issue — Martin, Feb 23 '18 at 16:01
Maybe check this old topic: https://stackoverflow.com/questions/23333231/bootstrap-button-shows-blue-outline-when-clicked — Grandm_a, Feb 23 '18 at 16:11

score 2 · Answer 1 · answered Feb 23 '18 at 16:12

2

Your blue border is cause by the btn-primary class. You need to override the border colour and box shadow to remove it (also removed the outline just in case):

.btn.btn-primary {
  border-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}

Example bootply

answered Feb 23 '18 at 16:12

Pete

57,112
28
117
166

Don't use !important if you don't have to. – Nathaniel Flick Feb 23 '18 at 16:16
Yeah I know but also don't use bootstrap! There are much better grid systems out there that don't make you need to override every single thing! Above needs the important though otherwise there is still a blue border on the button down – Pete Feb 23 '18 at 16:23
The person asking the question uses bootstrap, so your desire to not use it doesn't matter in this case. Also, if your override styles are loaded last, you can avoid !important no matter what framework you might be using. – Nathaniel Flick Feb 25 '18 at 14:42
@NathanielFlick well your desire not to use important also does not matter in this case as if you actually check the bootply link, you will see the styles are loaded last and do not override bootstrap styles so the need for important is there if they want to use the selector shown in OP. Also your answer does not work - the blue border is still there when you click on the button and after you have clicked, which OP has specifically stated they want to remove – Pete Mar 06 '18 at 12:57
It's not my desire, it's standard operating procedure for using CSS and the accepted way to do it. – Nathaniel Flick Mar 07 '18 at 21:42

score 0 · Answer 2 · answered Feb 23 '18 at 16:02

0

You could try to make a reset to the Input...

Some HTML elements have their own properties set by default and is different for each browser.

This is some information about the "reset" process: Reset Forms

answered Feb 23 '18 at 16:02

Fernando Valero

1

score 0 · Accepted Answer · answered Feb 23 '18 at 16:09

0

To switch it off you need the following css rule:

.btn:focus {
    box-shadow: none;
}

Because it's not an "outline" that's being used for that blue frame but box-shadow instead.

answered Feb 23 '18 at 16:09

WebDevBooster

14,674
9
66
70

Change blue frame around buttons in CSS

3 Answers3