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

我在一个网页上工作，我想自定义样式的<按钮>标签。在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;
}

当前回答

解决可访问性问题的另一种方法是通过一点Javascript。感谢来自hackernoon的这篇深刻的博客文章:https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

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

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);

2019-02-13 08:52:33

其他回答

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

input:focus {outline:0;}

2017-09-13 07:31:08

将其添加到CSS文件中。

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

2015-07-22 06:35:12

使用下面的代码Chakra UI，

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

*[data-focus] {
  box-shadow: none !important;
}`

2022-03-16 07:49:08

为了获得更好的结果，不要忘记!important声明

button:focus {outline:0 !important;}

具有!important属性的规则将始终被应用，无论该规则出现在CSS文档中的哪个位置。

2014-05-28 16:50:07

直到所有现代浏览器都开始支持css-selector:focus-visible，保存可访问性的最简单，可能也是最好的方法是将这个棘手的焦点仅留给鼠标用户，而留给键盘用户:

1.使用这个小的填充(大约10kb): https://github.com/WICG/focus-visible 2.在css中添加下一个代码:

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

浏览器对css4-selector:focus-visible的支持现在非常弱: https://caniuse.com/#search=focus-visible

2018-05-31 20:56:55

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

推荐文章

最新文章

标签