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

Question

我正在处理一个网页，我想要自定义样式的标记。所以对于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;
}

Answer 1

我只是通过选择all并将outline：none应用于everything：）

*:focus {outline:none}

正如bagofcole所提到的，您可能还需要添加！重要，因此样式将如下所示：

*:focus {outline:none !important}

Answer 2

等等！那丑陋的轮廓是有原因的！

在删除那个难看的蓝色轮廓之前，您可能需要考虑可访问性。默认情况下，蓝色轮廓被放置在可聚焦元素上。这样，有可访问性问题的用户就可以通过跳转到该按钮来聚焦该按钮。有些用户不具备使用鼠标的运动技能，必须仅使用键盘（或其他输入设备）进行计算机交互。当你移除蓝色轮廓时，不再有一个关于什么元素被聚焦的可视指示器。如果你打算移除蓝色轮廓，你应该用另一种类型的按钮聚焦的视觉指示来代替它。

可能的解决方案：聚焦时使按钮变暗

对于下面的示例，首先使用按钮：focus{outline：0！importance；}删除了Chrome的蓝色轮廓

正如你所看到的，按钮在接收焦点时有点暗。就我个人而言，我建议将聚焦按钮调得更暗，这样在聚焦状态和按钮的正常状态之间就会有一个非常明显的区别。

它不仅仅是为残疾用户提供的

使您的网站更易访问是一个经常被忽视的东西，但可以帮助创建一个更有成效的体验在您的网站。有许多正常的用户使用键盘命令在网站中导航，以便保持双手在键盘上。

Answer 3

不建议这样做，因为它会使站点的可访问性倒退；更多信息，请看这篇文章。

这就是说,如果您坚持,这个CSS应该可以工作：

button:focus {outline:0;}

查看或jsfiddle:http://jsfidle.net/u4pxu/

或在此代码段中：

null

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>