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

我正在处理一个网页，我想要定制样式的

标签。对于CSS，我说：

border:none

。现在它在safari中工作得很好，但在chrome中，当我点击其中一个按钮时，它会在周围放置一个恼人的蓝色边框。我认为

按钮：活动{outline:none}

或

按钮：焦点{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;}

查看它或JSFIDLE：

或者在此片段中：

button.launch{
背景色：#F9A300；
边界：无；
高度：40px；
填充：5px15px；
颜色：#ffffff；
字体大小：16px；
字体大小：300；
边缘顶部：10px；
右边距：10px；
}
按钮。启动：悬停{
光标：指针；
背景色：#FABD44；
}
按钮启动{
背景色：#F9A300；
边界：无；
高度：40px；
填充：5px15px；
颜色：#ffffff；
字体大小：16px；
字体大小：300；
边缘顶部：10px；
右边距：10px；
}
按钮。启动：悬停{
光标：指针；
背景色：#FABD44；
}
换钮扣{
背景色：#F88F00；
边界：无；
高度：40px；
填充：5px15px；
颜色：#ffffff；
字体大小：16px；
字体大小：300；
边缘顶部：10px；
右边距：10px；
}
按钮。更改：悬停{
光标：指针；
背景色：#F89900；
}
按钮：激活{
大纲：无；
边界：无；
}
按钮：焦点{大纲：0；}

发布这些广告
更改

不建议这样做，因为这会使站点的性能下降；有关更多信息，请参阅此

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

button:focus {outline:0;}

查看它或JSFIDLE：

或者在此片段中：

button.launch{
背景色：#F9A300；
边界：无；
高度：40px；
填充：5px15px；
颜色：#ffffff；
字体大小：16px；
字体大小：300；
边缘顶部：10px；
右边距：10px；
}
按钮。启动：悬停{
光标：指针；
背景色：#FABD44；
}
按钮启动{
背景色：#F9A300；
边界：无；
高度：40px；
填充：5px15px；
颜色：#ffffff；
字体大小：16px；
字体大小：300；
边缘顶部：10px；
右边距：10px；
}
按钮。启动：悬停{
光标：指针；
背景色：#FABD44；
}
换钮扣{
背景色：#F88F00；
边界：无；
高度：40px；
填充：5px15px；
颜色：#ffffff；
字体大小：16px；
字体大小：300；
边缘顶部：10px；
右边距：10px；
}
按钮。更改：悬停{
光标：指针；
背景色：#F89900；
}
按钮：激活{
大纲：无；
边界：无；
}
按钮：焦点{大纲：0；}

发布这些广告
更改

不要忘记

！重要信息

声明，以获得更好的结果

button:focus {outline:0 !important;}

---

这是一条有规则的规则！无论该规则出现在CSS文档中的什么位置，重要属性都将始终应用。

不要忘记

！重要信息

声明，以获得更好的结果

button:focus {outline:0 !important;}

---

这是一条有规则的规则！重要属性将始终应用，无论该规则出现在CSS文档中的何处。

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

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

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

对于下面的示例，Chrome的蓝色轮廓首先是通过使用

按钮：focus{outline:0！important；}

以下是您的基本引导按钮，它们通常显示为：

以下是接收焦点时的按钮：

按下按钮时，按钮如下：

正如你所看到的，当按钮接收到焦点时，它们会稍微暗一些。就我个人而言，我建议将对焦按钮设置得更暗，以便在对焦状态和按钮的正常状态之间有非常明显的差异

这不仅仅适用于残疾用户

---

让你的网站更容易访问是经常被忽视的事情，但这有助于在你的网站上创造更高效的体验。有许多普通用户使用键盘命令浏览网站，以便将手放在键盘上。

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

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

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

对于下面的示例，Chrome的蓝色轮廓首先是通过使用

按钮：focus{outline:0！important；}

以下是您的基本引导按钮，它们通常显示为：

下面是收到f时的按钮

*:focus {outline:none !important}

button:focus {
  outline:none;
  box-shadow: none;
}

*{
outline: none;
}

*{
outline-style: none;
}

button:focus {
    box-shadow:none;
}

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

element:active:focus {
    outline: 0;
}

input:focus {outline:0;}

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

npm install --save focus-visible

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

import 'focus-visible/dist/focus-visible.min';

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

button:focus {outline:0;}

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

.custom-button {
    outline: none
}

button:focus { outline: none !important; box-shadow: none !important; }

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>