删除蓝色边框从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;
}

当前回答

好吧，即使有永远不会有人看到这个的风险，因为已经有很多答案了，我想在2020年提供更多的js解决方案，有很多:

Outline.js或Outline.js这两个库都解决了我们在这里遇到的问题:删除鼠标的轮廓，但保留键盘功能或可访问性。

所以，与其决定哪种风格和可访问性更重要，不如两者都选!

2020-06-12 02:52:00

其他回答

删除大纲对于可访问性是非常糟糕的!理想情况下，焦点环只在用户想要使用键盘时才会显示。

用途:focus-visible。它目前是W3C提议的使用CSS样式化仅用于键盘的焦点，并在Firefox (caniuse)中得到支持。在其他主要浏览器支持它之前，您可以使用这个健壮的填充。

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

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

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

2018-05-28 17:15:20

要删除蓝色背景的水龙头，我使用

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

2022-07-14 14:00:15

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

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

2016-06-09 14:50:10

Chrome和其他浏览器的修复

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

2019-06-07 07:35:27

我只是通过选择所有并应用outline:none到所有内容来删除页面中的所有标签的大纲:)

*:focus {outline:none}

正如bagofcole提到的，你可能还需要添加!important，所以样式看起来是这样的:

*:focus {outline:none !important}

2016-01-06 14:49:09

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

推荐文章

最新文章

标签