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

问题描述

我正在处理一个网页，我想要自定义样式的 标签.所以对于 CSS，我说:border: none.现在它在 safari 中完美运行，但在 chrome 中，当我单击其中一个按钮时，它会在它周围放置一个恼人的蓝色边框.我认为 button:active { outline: none } 或 button:focus { outline:none } 会起作用，但两者都不起作用.有任何想法吗?

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: 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. I thought button:active { outline: none } or button:focus { outline:none } would work, but neither do. Any ideas?

这是被点击前的样子(以及我希望它在被点击后的样子):

This is what it looks like before being clicked (and how I want it to still look after being clicked):

这就是我所说的边界:

这是我的 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;
}

推荐答案

不推荐这样做，因为它会使 您网站的可访问性；有关详细信息，请参阅此帖子.

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

也就是说，如果你坚持，这个 CSS 应该可以工作:

That said, if you insist, this CSS should work:

button:focus {outline:0;}

查看或 JSFiddle:http://jsfiddle.net/u4pXu/

Check it out or 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 中的 css 自定义样式按钮中删除蓝色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！