我在一个网页上工作,我想自定义样式的<按钮>标签。在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;
}

当前回答

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

input:focus {outline:0;}

其他回答

简单写提纲:无;。不需要使用伪元素焦点

可以用这个:

:active {
    outline:none;
}

如果那也不管用的话:

:active {
   outline:none !important;
}

这适用于我(FF和Chrome,至少)。不要以:focus状态为目标,只需以:active状态为目标,当用户单击链接时,这将删除浏览器中美观的突出显示。但是当一个有残疾标签或shift-tab的用户浏览一个页面时,它仍然会保留焦点状态。双方都很高兴。:)

这对我来说很管用:

button:focus {
    box-shadow:none;
}

我只是通过选择所有并应用outline:none到所有内容来删除页面中的所有标签的大纲:)

*:focus {outline:none}

正如bagofcole提到的,你可能还需要添加!important,所以样式看起来是这样的:

*:focus {outline:none !important}

对于任何使用Bootstrap并有此问题的人来说,他们使用:active:focus以及仅仅:active和:focus,所以你需要:

element:active:focus {
    outline: 0;
}

希望能节省一些人的时间来解决这个问题,我敲了敲我的头,想知道为什么这么简单的事情不能工作。