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

Question

我正在开发一个网页,我想要自定义样式的<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

只需将此添加到您的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>

Answer 2

等待!这个丑陋的轮廓有一个原因!

在删除丑陋的蓝色轮廓之前,您可能需要考虑可访问性.默认情况下,蓝色轮廓放在可聚焦元素上.这样,具有辅助功能问题的用户可以通过选项卡来关注该按钮.一些用户没有使用鼠标的运动技能,并且必须仅使用键盘(或一些其他输入设备)进行计算机交互.当您移除蓝色轮廓时,不再有关于哪个元素聚焦的可视指示符.如果要删除蓝色轮廓,则应将其替换为按钮聚焦的其他类型的可视指示.

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

对于下面的示例,Chrome的蓝色轮廓首先通过使用删除 button:focus { outline:0 !important; }

以下是您正常显示的基本Bootstrap按钮:

以下是获得焦点时的按钮:

按下按钮时按下按钮:

如您所见,按钮在获得焦点时会稍微变暗.就个人而言,我建议使聚焦按钮更暗,以便聚焦状态和按钮的正常状态之间存在非常显着的差异.

它不仅适用于残疾用户

让您的网站更易于访问是一件经常被忽视的事情,但可以帮助您在网站上创造更高效的体验.有许多普通用户使用键盘命令来浏览网站以便将手放在键盘上.

Answer 3

我只是通过选择all并将outline:none应用于所有内容,从页面中的所有标签中删除轮廓:)

*:focus {outline:none}

正如bagofcole所提到的,你可能还需要添加!important,所以样式将如下所示:

*:focus {outline:none !important}

Answer 4

不要忘记!important声明,以获得更好的结果

button:focus {outline:0 !important;}

无论CSS规则中出现哪个规则,都将始终应用具有!important属性的规则.

Answer 5

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

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

Answer 6

删除outline对于可访问性来说非常糟糕!理想情况下,只有当用户打算使用键盘时才会显示聚焦环.

使用:焦点可见.它目前是一个W3C提议,用于使用CSS设置仅键盘焦点的样式.在主流浏览器支持之前,您可以使用这种强大的polyfill.

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

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

我还写了一篇更详细的文章,以防您需要更多信息.

Answer 7

在CSS文件中添加它.

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

Answer 8

使用这个:

:active {
    outline:none;
}

或者如果这不起作用:

:active {
   outline:none !important;
}

这对我有用(至少FF和Chrome).只需定位:focus状态,而不是定位状态,:active当用户点击链接时,这将删除浏览器中美学上突兀的突出显示.但是当有残障的用户选项卡或通过页面切换标签时,它仍将保留焦点状态.双方都很开心.:)

Answer 9

Chrome 和其他浏览器的修复

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

Answer 10

对于任何使用Bootstrap并遇到此问题的人,他们使用:active:focus以及just:active和:focus所以你需要:

element:active:focus {
    outline: 0;
}

希望有人能节省一些时间来解决这个问题,让我有点疑惑,想知道为什么这么简单的事情无法正常工作.

Answer 11

我在引导程序时遇到了同样的问题。我用轮廓和盒子阴影解决了

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

Answer 12

如果您使用的是 Bootstrap 4.1 和可能的其他版本，则大多数解决方案都将不起作用。经过一番折腾，我发现你需要应用shadow-none类：

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

Answer 13

这对我有用：

button:focus {
    box-shadow:none;
}

Answer 14

对于这个问题：

用这个：

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

结果：