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

Question

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

我正在做一个网页，我想要定制样式<button>标签。因此，对于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

等等！这个丑陋的轮廓是有原因的！在删除那个难看的蓝色轮廓之前，您可能需要可达性考虑在内。默认情况下，蓝色大纲放在可聚焦元素上。这样，具有可访问性问题的用户就可以通过选项卡来聚焦该按钮。有些用户不具备使用鼠标的运动技能，必须只使用键盘(或其他输入设备)进行计算机交互。当您移除蓝色轮廓时，将不再有一个视觉指示器来说明哪个元素是焦点所在。如果要删除蓝色轮廓，请应用另一种显示按钮焦点的视觉指示替换它。可能的解决方案：聚焦时的暗按钮对于下面的示例，Chrome的蓝色轮廓首先通过button:focus { outline:0 !important; }以下是您正常显示的基本引导按钮：下面是按钮接收焦点时的情况：在这里，当按下按钮时：正如你所看到的，按钮在接收到焦点时会变暗一些。就我个人而言，我建议将聚焦按钮变得更暗，这样按钮的聚焦状态和正常状态之间就会有一个非常明显的区别。这不仅仅是针对残疾用户的让您的网站更容易访问是经常被忽视的事情，但可以帮助创造一个更有成效的经验在您的网站。有许多普通用户使用键盘命令浏览网站，以保持手在键盘上。

Answer 2

我只需从页面中的所有标记中删除大纲，方法是选择All并应用Outline：None to All：)*:focus {outline:none}正如Bagofcole所提到的，您可能需要添加！也很重要，所以样式将如下所示：*:focus {outline:none !important}