协慌网

我正在处理一个网页，并且需要自定义样式的<button>标签。因此，对于 CSS，我说： border: none 。现在，它可以完美地用于野生动物园，但是在 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 应该可以工作：

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>

等待！有这么丑陋的轮廓是有原因的！

在删除该丑陋的蓝色轮廓之前，您可能需要考虑可访问性 。默认情况下，该蓝色轮廓放置在可聚焦元素上。这样一来，具有可访问性问题的用户就可以通过单击该按钮来使该按钮聚焦。一些用户不具备使用鼠标的运动技能，而只能使用键盘（或某些其他输入设备）进行计算机交互。删除蓝色轮廓时，将不再有视觉指示器指示要聚焦的元素。如果要删除蓝色轮廓， 则应将其替换为按钮已聚焦的另一种视觉指示。

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

对于下面的示例，首先使用button:focus { outline:0 !important; }删除了 Chrome 的蓝色轮廓button:focus { outline:0 !important; }

这是正常显示的基本 Bootstrap 按钮：

以下是他们获得焦点时的按钮：

按下按钮时的按钮如下：

如您所见，按钮在获得焦点时会变暗。就个人而言，我建议使聚焦按钮更暗，以使按钮的聚焦状态和正常状态之间有非常明显的区别。

不只是针对残疾用户

使您的网站更易于访问通常被忽略，但是可以帮助您在网站中创造更高的体验。有许多普通用户使用键盘命令来浏览网站，以使手在键盘上。

我只是通过选择全部并对所有内容应用 outline：none 来从页面中所有标签中删除大纲：)

*:focus {outline:none}

如 bagofcole 所述，您可能还需要添加！important，因此样式将如下所示：

*:focus {outline:none !important}