Question

我的按钮有问题。

我想在点击上修复灰色效果，但我不知道该怎么做。

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

Answer 1

将此添加到您的css

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

PS：不建议将其删除，因为它旨在让残障人士或未使用触控/鼠标作为对照的人更容易获得用户体验（例如，如果你试图使用TAB按钮导航到那个按钮，这将非常困难）

Answer 2

你的意思是悬停？如果是这样，请创建一些自定义CSS，声明：

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

Answer 3

我认为你指的是点击/聚焦时按钮的轮廓。

这是您可能会考虑的CSS：

    .btn:focus {
        outline: 0;
    }

以下是您问题的详细解答。 Remove blue border from css custom-styled button in Chrome

Bootstrap按钮轮廓

3 个答案: