请问在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}