css - 从Chrome中的css自定义样式按钮中删除蓝色边框(Remove blue border from css custom-styled button in Chrome)

Question

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

  ask by eshellborn translate from so

Answer 1

Just add this to your css:

(只需将此添加到您的CSS：)

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

(看看它或JSFiddle： http ： //jsfiddle.net/u4pXu/)

Or in this snippet:

(或者在这个片段中：)

 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>