在Chrome中从css自定义样式的button中删除蓝色边框
我在网页上工作，我想要自定义风格的<button>标签。 所以用CSS，我说： border: none 。 现在它在safari中完美的工作，但在铬，当我点击其中一个button，它周围的一个令人讨厌的蓝色边框。 我想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来关注该button。 一些用户没有使用鼠标的运动技能，只能使用键盘（或其他input设备）进行计算机交互。 当你删除蓝色轮廓时，不再有关于哪个元素被聚焦的视觉指示器。 如果要删除蓝色轮廓， 则应将其replace为其他types的button所关注的可视指示。
可能的解决scheme：聚焦时变暗button
对于以下示例，Chrome的蓝色轮廓首先使用button:focus { outline:0 !important; }删除button:focus { outline:0 !important; } button:focus { outline:0 !important; }
这是您的基本引导button，因为它们正常显示： 
以下是他们获得焦点时的button： 
这里按下button时： 
正如你所看到的，当他们获得焦点时，button会变得更暗一些。 就个人而言，我build议使聚焦button更暗，以使聚焦状态和button的正常状态之间存在非常明显的差异。
这不仅适用于残疾人用户
让您的网站更容易访问是经常被忽视的东西，但可以帮助您在您的网站创造更有效的体验。 有很多普通用户使用键盘命令来浏览网站，以保持双手在键盘上。
不要忘记!important声明，以获得更好的结果
button:focus {outline:0 !important;}
具有！重要属性的规则将始终应用，无论该规则出现在CSS文档中的哪个位置。
我只是通过select全部和应用大纲：无所有:)从页面中的所有标签删除大纲
*:focus {outline:none}
正如bagofcole提到的那样，您可能需要添加！important以及，所以样式将如下所示：
*:focus {outline:none !important}
在我这个问题的实例中，我不得不指定box-shadow: none
button:focus { text-decoration: none; outline:none; border: none; box-shadow: none; }
将其添加到您的CSS文件中。
*{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }
使用这个：
:active { outline:none; }
或者如果这不起作用：
:active { outline:none !important; }
这适用于我（FF和Chrome，至less）。 而不是针对:focus状态，只是针对:active状态，这将消除当用户点击链接时在浏览器中美观突出的突出显示。 但是当残疾用户通过页面标签或者换档标签时，它仍然保持焦点状态。 双方都很高兴。 🙂
这对我来说是有效的：
button:focus { box-shadow:none; }
对于任何使用Bootstrap并且有这个问题的人，他们使用：active：focus以及：active和：focus，所以你需要：
element:active:focus { outline: 0; }
希望有时候能够救一个人，弄明白，为什么这么简单的事情不起作用。
尝试此代码的所有元素有蓝色边框问题
*{ outline: none; }
要么
*{ outline-style: none; }
如果你想在input中删除相同的效果，你可以添加下面的代码以及button。
input:focus {outline:0;}
对于这个问题：
用这个：
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */ }
结果：
