Html CSS 移除默认蓝色边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16648627/
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
CSS remove default blue border
提问by Peter
I have a form with multiple buttons where I use a JavaScript to submit the second button when some one presses enter.
我有一个带有多个按钮的表单，当有人按下 Enter 时，我使用 JavaScript 提交第二个按钮。
This works great but if I open this form in IE the first button gets a blue border that tells the user "this is the button that will be pressed when you press enter".
这很好用，但如果我在 IE 中打开这个表单，第一个按钮会出现一个蓝色边框，告诉用户“这是当你按下 Enter 键时会被按下的按钮”。
Is there any way to remove that with CSS without overriding the rest of the button's styling?
有没有办法用 CSS 删除它而不覆盖按钮的其余样式？
Example:
例子：
<button onclick="javascript:alert('remove');">Remove name</button>
回答by Ben Frain
Think this should work (only tested IE10 on PC) for the border:
认为这应该适用于边界（仅在 PC 上测试了 IE10）：
button { outline: 0; }
button { outline: 0; }
Want to remove the background (needed on WebKit/Blink)?
想要删除背景（需要在 WebKit/Blink 上）？
Add:
添加：
background: none;
background: none;
Need to get rid of the border (removes background on IE10 too):
需要去掉边框（也去掉 IE10 上的背景）：
border: 0;
border: 0;
回答by Touhid Rahman
Use this code:
使用此代码：
button { border:0;}
回答by Leandro RR
my solution (after a few months)
我的解决方案（几个月后）
button:focus {
outline: 0;
box-shadow: none;
}
回答by Butani Vijay
This may help you. Use following CSS properties:
这可能对你有帮助。使用以下 CSS 属性：
input,
input:active,
input:focus {
outline: 0;
outline-style: none;
outline-width: 0;
}
回答by Mohammad Areeb Siddiqui
Use this code:
使用此代码：
button {
border : 0px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
回答by crazyjedi98
#sideToggle:focus, #sideToggle:active{
outline: 0;
outline-style:none;
outline-width:0;
}
This solved my problem if anyone else visits the post. I added my own styles separately, as they really aren't central to the issue.
如果其他人访问该帖子，这解决了我的问题。我单独添加了我自己的样式，因为它们确实不是问题的核心。
回答by crazyjedi98
button{border:none; border-radius:4px; -moz-border-radius:4px;}
回答by Touhid Rahman
Simply add border-radius to develop the button look:
只需添加 border-radius 来开发按钮外观：
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
