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

问题：

I'm working on a web page, and I want custom-styled <button> tags. 我正在开发一个网页，我想要自定义样式的<button>标签。 So with CSS, I said: border: none . 所以用CSS，我说： border: none 。 Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an annoying blue border around it. 现在它在safari中完美运行，但在chrome中，当我点击其中一个按钮时，它会在它周围放置一个恼人的蓝色边框。 I thought button:active { outline: none } or button:focus { outline:none } would work, but neither do. 我认为button:active { outline: none }或button:focus { outline:none }会起作用，但两者都不起作用。 Any ideas? 有任何想法吗？

This is what it looks like before being clicked (and how I want it to still look after being clicked): 这是它在被点击之前的样子（以及我希望它在被点击之后仍然看起来如何）：

And this is the border I'm talking about: 这就是我所说的边界：

在此输入图像描述

Here is my CSS: 这是我的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;
}

解决方案：

参考一： https://stackoom.com/question/1NLOk/从Chrome中的css自定义样式按钮中删除蓝色边框
参考二： https://oldbug.net/q/1NLOk/Remove-blue-border-from-css-custom-styled-button-in-Chrome

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/4336071

标签

Chrome

safari