提问者:小点点

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


我正在处理一个网页,我想要自定义样式的


共3个答案

匿名用户

不建议这样做,因为它会使站点的可访问性倒退;更多信息,请看这篇文章。

这就是说,如果您坚持,这个CSS应该可以工作:

button:focus {outline:0;}

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

或在此代码段中:

null

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>

匿名用户

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

在删除那个难看的蓝色轮廓之前,您可能需要考虑可访问性。默认情况下,蓝色轮廓被放置在可聚焦元素上。这样,有可访问性问题的用户就可以通过跳转到该按钮来聚焦该按钮。有些用户不具备使用鼠标的运动技能,必须仅使用键盘(或其他输入设备)进行计算机交互。当你移除蓝色轮廓时,不再有一个关于什么元素被聚焦的可视指示器。如果你打算移除蓝色轮廓,你应该用另一种类型的按钮聚焦的视觉指示来代替它。

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

对于下面的示例,首先使用按钮:focus{outline:0!importance;}删除了Chrome的蓝色轮廓

正如你所看到的,按钮在接收焦点时有点暗。就我个人而言,我建议将聚焦按钮调得更暗,这样在聚焦状态和按钮的正常状态之间就会有一个非常明显的区别。

它不仅仅是为残疾用户提供的

使您的网站更易访问是一个经常被忽视的东西,但可以帮助创建一个更有成效的体验在您的网站。有许多正常的用户使用键盘命令在网站中导航,以便保持双手在键盘上。

匿名用户

我只是通过选择all并将outline:none应用于everything:)

*:focus {outline:none}

正如bagofcole所提到的,您可能还需要添加!重要,因此样式将如下所示:

*:focus {outline:none !important}