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


Remove blue border from css custom-styled button in Chrome

我正在开发一个网页，我想要定制风格的

相关讨论

只需将此添加到您的CSS中：

1
button:focus {outline:0;}

查看或jsfiddle:http://jsfiddle.net/u4pxu/

或者在这段代码中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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;}

号

1
2
<button class="launch">Launch with these ads</button>
<button class="change">Change</button>

相关讨论

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

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

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

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

以下是基本的引导程序按钮，它们通常会出现：Bootstrap Buttons in Normal State。

以下是它们接收焦点时的按钮：氧化镁

按下按钮时：氧化镁

正如你所看到的，当按钮获得焦点时，它们有点暗。就我个人而言，我建议将焦点按钮设置得更暗，以便在焦点状态和按钮的正常状态之间有一个非常明显的区别。

它不仅适用于残疾用户

让你的网站更容易访问是经常被忽视的事情，但可以帮助创造一个更有成效的经验，在你的网站。有许多普通用户使用键盘命令在网站中导航，以保持对键盘的控制。

相关讨论

我只需选择"全部"并将"大纲：无"应用于所有内容，即可从页面中的所有标记中删除大纲。

1
*:focus {outline:none}

正如巴戈夫科尔所说，你可能需要补充！同样重要的是，样式如下：

1
*:focus {outline:none !important}

。

相关讨论

不要忘记!important声明，这样会得到更好的结果。

1
button:focus {outline:0 !important;}

。

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

相关讨论

在我这个问题的例子中，我必须指定box-shadow: none。

1
2
3
4
button:focus {
  outline:none;
  box-shadow: none;
}
相关讨论

删除EDOCX1[5]对于可访问性来说很糟糕！理想情况下，焦点环仅在用户打算使用键盘时出现。

使用：焦点可见。它目前是一个W3C建议，只使用CSS设计键盘样式，并在火狐(Canius)中得到支持。在其他主要浏览器支持它之前，您可以使用这个健壮的polyfill。

1
2
3
4
5
6
7
8
9
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

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

号

我还写了一篇更详细的文章，以防你需要更多信息。

相关讨论

将其添加到CSS文件中。

1
2
3
*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

。

相关讨论

使用以下任一选项：

1
2
3
:active {
    outline:none;
}

如果这不起作用：

1
2
3
:active {
   outline:none !important;
}

。

这对我有用(至少是FF和Chrome)。而不是针对:focus状态，只针对:active状态，这样当用户单击链接时，浏览器中的视觉突出显示就消失了。但当残疾用户在页面中切换选项卡或切换选项卡时，它仍将保留焦点状态。双方都很高兴。：)

相关讨论

对于使用引导程序并遇到此问题的任何人，他们使用：active:focus以及just:active和：focus，因此您需要：

1
2
3
element:active:focus {
    outline: 0;
}

号

希望能节省一些时间，让别人知道这一点，我的头有点不明白为什么这么简单的事情不起作用。

这就是我的工作：

1
2
3
button:focus {
    box-shadow:none;
}

号

对所有有蓝色边框问题的元素尝试此代码

1
2
3
*{
outline: none;
}

。

或

1
2
3
*{
outline-style: none;
}

号

对于这个问题：

氧化镁

使用此：

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

号

结果：

氧化镁

如果要删除输入中的相同效果，可以添加以下代码和按钮。

1
input:focus {outline:0;}

号

直到所有的现代浏览器开始支持css选择器：focus visible，保存可访问性的最简单、可能也是最好的方法是只为鼠标用户删除这个棘手的焦点，并为键盘用户保存它：

1.使用这个小的polyfill(大约10千字节)：https://github.com/wicg/focus-visible2.在CSS中添加下一个代码：

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

CSS4选择器的浏览器支持：焦点现在可见非常弱：https://canius.com/search=焦点可见

只需编写outline:none;。不需要使用伪元素focus。

我也面临同样的问题，所以我使用了简单的CSS-

1
2
3
.custom-button {
    outline: none
}

。

这是Chrome家族的一个问题，并且一直存在。

出现了一个bug https://bugs.chromium.org/p/chromium/issues/detail？内径=904208

它可以在这里显示：https://codepen.io/anon/pen/jedvwj只要您向任何按钮添加边框(例如，在标签中添加了role="button")，chrome就会混乱，并在您单击鼠标时设置焦点状态。

我强烈建议使用此修复程序：https://github.com/wicg/focus-visible。

只需执行以下操作

1
npm install --save focus-visible

号

将脚本添加到HTML:

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

如果使用Webpack或类似工具，则导入主条目文件：

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

。

然后将其放入CSS文件：

1
2
3
4
5
6
7
8
9
10
11
// 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;
}

您可以设置：

1
button:focus {outline:0;}

。

但是，如果你有大量的用户，你会对那些不能使用鼠标的人或那些只想使用键盘来提高速度的人不利。

解决可访问性问题的另一种方法是使用一点javascript。来自hackernoon的这篇有见地的blogpost：https://hackernoon.com/removing-that-丑-focus-ring-and-keeping-it-too-6C8727fefcd2

这里的方法非常简单但有效：当人们开始使用tab键导航页面时添加一个类(当再次切换到鼠标时，可以选择删除它)。然后，您可以使用这个类来显示焦点轮廓。

1
2
3
4
5
6
7
8
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);

对Chrome和其他浏览器的修复

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

我的引导程序也有同样的问题，我用轮廓和框阴影解决了这个问题。

1
2
3
.btn:focus, .btn.focus {
outline: none!important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0)!importamt; // Or none

。

}