CSS：如何删除奇怪的行

Question

我有一个按钮。当我点击它时，一些奇怪的虚线显示为，我无法删除。尝试了我在CSS中所知道但无法解决的问题。请帮助。

这是我的css：

input.filterIcon {
width: 32px !important;
height: 32px !important;
background: url(../images/filter-icn.png) no-repeat center right !important;
padding: 0px !important;
cursor: pointer;
float: right;
vertical-align: middle;
margin: 0 0 0 10px !important;
font-size: 12px;
letter-spacing: 0.5px;
position: fixed;
z-index: 99999;
top: 70px;
right: 15px;
outline: 0 !important;
}

这是我的HTML

<form id="search_form">     
<input type="button" class="filterIcon" id="iconfilter">
</form>

Answer 1

默认情况下，锚点链接（＆＃39; s）在它们变为“活跃”时会有一个虚线轮廓。或者＆＃34;专注＆＃34;。

如果您希望它消失，并且您希望它在每个单独的锚链接上消失，只需将其作为CSS重置的一部分包含在内：

a, button {
  outline: 0;
}
a:hover, a:active, a:focus {
  /* styling for any way a link is about to be used */
}

Firefox输入单击输入类型=图像可以生成虚线轮廓 要删除它：input::-moz-focus-inner { border: 0; }

来源：https://css-tricks.com/removing-the-dotted-outline/

Answer 2

很难确定没有任何其他信息，但尝试将其添加到按钮的css

outline: 0;

Answer 3

因为大纲，你可以尝试这段代码。

button, button:hover, button:focus, button:active,
a, a:hover, a:focus, a:active {
    outline: 0;
}

Answer 4

虚线边框是出于可访问性原因，作为所选内容（点击）的直观线索。您可以通过将这个CSS添加到元素（类名取决于元素）来轻松摆脱这个：

.button {
  outline: none;
}

Mozilla Developer Network上的

outline：

  

大纲CSS属性是在单个声明中设置各种大纲属性的简写：outline-style，outline-width和outline-color。

Answer 5

您可以使用以下代码删除大纲：

outline: none;