删除蓝色边框从css自定义样式的按钮在Chrome

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

当前回答

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

.custom-button {
    outline: none
}

2019-02-18 12:40:16

其他回答

我在bootstrap上也遇到了同样的问题。我用轮廓和盒影来解决

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}

2019-01-30 14:44:28

可以用这个:

:active {
    outline:none;
}

如果那也不管用的话:

:active {
   outline:none !important;
}

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

2014-11-11 21:45:53

对所有有蓝色边框问题的元素尝试此代码

*{
outline: none;
}

*{
outline-style: none;
}

2016-12-16 10:17:54

不建议这样做，因为这会降低网站的可访问性;更多信息，请看这篇文章。

也就是说，如果你坚持，这个CSS应该工作:

button:focus {outline:0;}

查看它或JSFiddle: http://jsfiddle.net/u4pXu/

或者在这个片段中:

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.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; } button:focus {outline:0;} <button class="launch">Launch with these ads</button> <button class="change">Change</button>

2014-02-13 15:15:15

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

2018-07-09 16:18:41

删除蓝色边框从css自定义样式的按钮在Chrome

推荐文章

最新文章

标签