如何隐藏按钮轮廓

我有这个页面有很多按钮的位置：https://jsfiddle.net/Android272/c150305z/如何隐藏按钮轮廓

我曾尝试下面的代码，但没有的每个组合将摆脱轮廓。

*:focus, 
button, 
button:focus, 
button:active { 
    outline: 0; 
    outline-width: 0; 
    outline: none; 
    outline-style: none; 
}

来源

2015-04-05 Andrew Pullins

万一你的意思是使用'边境：none'？ – aug 2015-04-05 01:47:29

http://stackoverflow.com/a/19886893/383904 – 2015-04-05 02:00:29

请参阅下面的答案。有人说轮廓是问题，但显然不是因为你重写了轮廓属性。这绝对是由twitter引导应用的1px边框。 – 2015-04-05 02:06:56

理论上，可以这样写：

button { 
    outline: none; 
}

这将删除选择边界一个按钮。但是，在这种情况下，我们需要在outline属性上使用!important以防止Bootstrap覆盖它（如下所示）。我还建议使用Chrome和Firefox为known bug添加跨浏览器支持。

button { 
    outline: none !important; 
} 

input[type="button"]::-moz-focus-inner { 
    border: 0; 
}

或者，Bootstrap将这些样式与焦点按钮相关联，您需要删除或覆盖。

.btn.active.focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn:active:focus, 
.btn:focus { 
    outline: thin dotted; 
    outline: 5px auto -webkit-focus-ring-color; 
    outline-offset: -2px; 
}

使用此覆盖它：

.btn.active.focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn:active:focus, 
.btn:focus { 
    outline: none; 
}

来源

2015-04-05 01:58:26 partypete25

你的HTML使用Twitter的引导的btn和btn-primary clasess

<button type="button" class="btn btn-primary circle"...></button>

这是这些类做：

.btn{ 
    border: 1px solid transparent; 
} 

.btn-primary { 
     color: #fff; 
     background-color: #337ab7; 
     border-color: #2e6da4; 
}

因此，使用border: none;和恼人的蓝色边框将消失！

https://jsfiddle.net/c150305z/16/

来源

2015-04-05 01:48:09

更新您的提琴在这里： Working Fiddle

只是这一行： button { outline: none !important; }

来源

2015-04-05 01:51:24 Harko

如何隐藏按钮轮廓

回答

相关问题