Html 如何删除html按钮的轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19447232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to remove outline of html button
提问by Vijay
I have button on my html page, when i click on that button it show me outer line to button shown as below image.
我的 html 页面上有按钮，当我单击该按钮时，它会显示按钮的外线，如下图所示。
here when i click on reset button it show me outer as above image.
在这里，当我单击重置按钮时，它会显示如上图所示的外部。
Html code:
html代码：
< input type="reset" value="" class="resetButton" />
css code:
css代码：
.resetButton
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
border: none;
width: 90px;
height: 32px;
cursor: pointer;
}
回答by Mr_Green
Use this:
用这个：
input[type="reset"]:focus{
outline: none;
}
or just
要不就
input:focus{
outline: none;
}
if you don't want that outline to all the input types.
如果您不希望所有输入类型都使用该轮廓。
回答by Valeri Crudu
Just add display: block;
只需添加 display: block;
.resetButton
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
display: block;
border: none;
width: 90px;
height: 32px;
cursor: pointer;
}
回答by Dominic Green
This is normally a chrome issue, the main thing to note here is that it is an outline not a border.
这通常是 chrome 问题，这里要注意的主要问题是它是轮廓而不是边框。
Try
尝试
.resetButton{ outline: none; }
For more info check out http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines
有关更多信息，请查看http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines
Also check out this post on the dangers of removing the border completely Google Chrome > Textboxes > Yellow border when active..?
另请查看这篇关于完全移除边框的危险的帖子 Google Chrome > 文本框 > 活动时黄色边框..？
回答by SanketS
Try this.
尝试这个。
.resetButton, .resetButton:visited
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
display: block;
width: 90px;
height: 32px;
cursor: pointer;
border: none;
outline: none;
}
回答by Micha? Rybak
回答by spacebean
Add an outline: noneto your css:
outline: none在你的 css 中添加一个：
.resetButton
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
border: none;
width: 90px;
height: 32px;
cursor: pointer;
outline: none;
}
回答by ValentinEnnser
Just add this to your CSS:
只需将其添加到您的 CSS 中：
.resetButton:focus {
outline: none;
}
