我在一个网页上工作,我想自定义样式的<按钮>标签。在CSS中,我说:border: none。现在它在safari中工作得很好,但在chrome中,当我点击其中一个按钮时,它会在它周围放上一个烦人的蓝色边框。我认为button:active {outline:none}或button:focus {outline:none}将工作,但两者都没有。什么好主意吗?

这是它在被点击之前的样子(以及我希望它在被点击之后的样子):

这就是我所说的边界:

这是我的CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

当前回答

如果您使用Bootstrap 4.1或其他版本,大多数解决方案将无法工作。在敲了很多脑袋之后,我发现你需要应用无影课程:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

其他回答

我遇到了同样的问题,所以我使用简单的CSS-

.custom-button {
    outline: none
}

对于这个问题:

用这个:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

结果:

如果你想在输入中删除相同的效果,你可以添加下面的代码和按钮。

input:focus {outline:0;}

如果您使用Bootstrap 4.1或其他版本,大多数解决方案将无法工作。在敲了很多脑袋之后,我发现你需要应用无影课程:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

为了获得更好的结果,不要忘记!important声明

button:focus {outline:0 !important;}

具有!important属性的规则将始终被应用,无论该规则出现在CSS文档中的哪个位置。