我在一个网页上工作，我想自定义样式的<按钮>标签。在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;
}
不建议这样做，因为这会降低网站的可访问性;更多信息，请看这篇文章。
也就是说，如果你坚持，这个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>
这是Chrome家族的一个问题，而且一直存在。
一个错误已经提出https://bugs.chromium.org/p/chromium/issues/detail?id=904208
它可以显示在这里:https://codepen.io/anon/pen/Jedvwj只要你添加一个边界的任何按钮一样(说role="button"已添加到一个标签为例)Chrome混乱和设置焦点状态，当你点击鼠标。
我强烈推荐使用这个修复程序:https://github.com/wicg/focus-visible。
只需执行以下步骤
npm install --save focus-visible
添加脚本到你的html:
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
或者导入到你的主入口文件，如果使用webpack或类似的东西:
import 'focus-visible/dist/focus-visible.min';
然后把这个放在你的CSS文件中:
// 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;}
但如果你有大量的用户，你就会对那些不能使用鼠标或只想用键盘提高速度的用户不利。
