更改CSS

Question

当我想在点击后更改/删除周围的蓝框时，我遇到了设置Bootstrap按钮样式的问题。情况就是这样：

我已经看过很多关于这个问题的帖子，而且几乎每个帖子都以“使用大纲：无”结尾。出于某种原因，这对我不起作用。 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。提前谢谢。

Answer 1

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

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

Example bootply

Answer 2

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

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

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

Answer 3

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

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

因为它不是＆＃34;大纲＆＃34;那个用于蓝色框架而是box-shadow。