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

问题描述

我在网页上工作，我想要自定义样式的< button> 标签。所以用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):

这是边界'm谈论：

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

推荐答案

：

button:focus {outline:0;}

请点击这里：
http://jsfiddle.net/u4pXu/

这篇关于在Chrome中从css自定义样式按钮中删除蓝色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！