Bootstrap button outline

Question

I have a problem with a button.

I want to fix that gray effect on click but i don't know how to do so.

<div class="col-lg-7 col-sm-5 col-md-11">
                        <form class="navbar-form">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Look for something cool">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
                            </div>

Motassem Kassab · Answer 1 · 2018-06-16T20:37:00.793

3

add this to your css

button:focus {
  box-shadow: none !important;
  outline: none !important; 
}

PS: it's not recommended to remove it, as it is meant to make the user experience more accessible for people with disabilities or people who are not using touch/mouse as control (for example, if you're trying to navigate to that button using TAB button it will be very hard)

edited Jun 16 '18 at 20:37

answered Jun 16 '18 at 11:05

Motassem Kassab

1,744
4
21
40

2

outline: none; box-shadow:none !important; – K4NU 420 Jun 16 '18 at 18:16
1

That's the best answer! – Suge Sep 15 '18 at 03:35

score 0 · Answer 2 · answered Jun 16 '18 at 11:08

0

Do you mean the hover? if so create some custom CSS that states:

.btn-outline-secondary:hover{
  // YOUR STYLES HERE (the grey comes from the background so...)
  background: red (or whatever you want)
}

answered Jun 16 '18 at 11:08

Sam

127
1
3
9

score 0 · Answer 3 · answered Jun 16 '18 at 12:55

I think you are referring to the outline of the button when clicked/focused.

here is the CSS you might consider:

    .btn:focus {
        outline: 0;
    }

Here is the detailed answer to your question. Remove blue border from css custom-styled button in Chrome

Bootstrap button outline

3 Answers3