删除Chrome中css自定义样式按钮的蓝色边框
删除Chrome中css自定义样式按钮的蓝色边框
提问于 2013-12-03 07:45:24
我正在处理一个网页，我想要自定义样式的<button>标签。所以对于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;
}回答 15
Stack Overflow用户
发布于 2016-01-06 22:49:10
我只是通过选择all并将outline:none应用于所有内容来从页面中的所有标记中删除大纲：)
*:focus {outline:none}正如bagofcole提到的，您可能还需要添加!important，因此样式将如下所示：
*:focus {outline:none !important}Stack Overflow用户
发布于 2016-06-09 22:50:10
在这个问题的实例中，我必须指定box-shadow: none
button:focus {
outline:none;
box-shadow: none;
}Stack Overflow用户
发布于 2014-05-29 00:50:08
不要忘记!important声明，以获得更好的结果
button:focus {outline:0 !important;}具有!important属性的规则将始终被应用，无论该规则出现在CSS文档中的什么位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20340138
复制相关文章
相似问题
腾讯云开发者
