更改CSS中按钮周围的蓝框[重复]答案

【问题标题】：Change blue frame around buttons in CSS [duplicate]更改CSS中按钮周围的蓝框[重复]
【发布时间】：2018-02-23 15:57:32
【问题描述】：

我在设置 Bootstrap 按钮的样式时遇到问题，我想在单击它们后更改/移除它们周围的蓝框。情况是这样的：

我已经看过很多关于这个问题的帖子，几乎每个帖子都以“use outline:none”结尾。出于某种原因，这对我不起作用。 CSS 代码：

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

如您所见，我盲目地将大纲属性放在任何地方，将所有可能性与试错法混合在一起。依然没有。如果你觉得有用的话，这是我的这个按钮的 HTML 代码：

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

另外，如果您能告诉我如何在单击按钮时更改按钮的背景颜色，那就太好了，由于某种原因，它对我也不起作用。我认为问题的原因在于 Bootstrap 中的某个地方，但我对前端完全陌生，只是一个初学者。另外，如果重要的话，我正在使用 Angular。提前致谢。

【问题讨论】：

YOLO，只需将 *:focus { outline: none } 添加到您的全局样式表中：P
做不添加!important。这不是解决这个问题的正确方法
不妨看看这个老话题：stackoverflow.com/questions/23333231/…

标签： html css angular bootstrap-4

【解决方案1】：

您的蓝色边框是由 btn-primary 类引起的。您需要覆盖边框颜色和框阴影以将其删除（也删除了轮廓以防万一）：

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

Example bootply

【讨论】：

如果没有必要，不要使用 !important。
是的，我知道，但也不要使用引导程序！那里有更好的网格系统，不会让你需要覆盖每一件事！上面需要重要的，否则按钮向下仍然有蓝色边框
提出问题的人使用引导程序，因此在这种情况下，您是否希望不使用它并不重要。此外，如果您的覆盖样式最后加载，则无论您使用什么框架，都可以避免 !important。
@NathanielFlick 好吧，在这种情况下，您不使用重要的愿望也无关紧要，就像您实际检查 bootply 链接一样，您将看到样式是最后加载的，并且不会覆盖引导样式，因此需要如果他们想使用 OP 中显示的选择器，重要的是在那里。您的答案也不起作用 - 当您单击按钮并单击后，蓝色边框仍然存在，OP 明确表示他们要删除
这不是我的愿望，这是使用 CSS 的标准操作程序和公认的方式。

【解决方案2】：

要关闭它，您需要以下 css 规则：

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

因为它不是用于那个蓝框的“轮廓”，而是box-shadow。

【讨论】：

【解决方案3】：

您可以尝试重置输入...

某些 HTML 元素默认设置了自己的属性，并且每个浏览器都不同。

这是有关“重置”过程的一些信息： Reset Forms

【讨论】：