CSS去除默认的蓝色边框

Question

我有一个带有多个按钮的表单，在这个表单中，我使用JavaScript脚本来在某人按下回车键时提交第二个按钮。

这个方法非常有效，但是如果我在IE中打开这个表单，第一个按钮会出现蓝色边框，告诉用户“当您按下回车键时将按下此按钮”。

是否有任何方法可以使用CSS删除该边框，而不覆盖其余按钮的样式？

示例：

<button  onclick="javascript:alert('remove');">Remove name</button>

- Peter

---

可以附上图片或代码。 - samayo

@phpNoOb，这里有一张图片（按钮），加入了一些代码... - Peter

我的IE8中没有显示蓝色边框。 - samayo

@phpNoOb 我使用的是IE9，这可能会有所不同... - Peter

可能是已回答问题的重复：http://stackoverflow.com/questions/7741964/how-to-disable-blue-glow-for-html-button-in-ie9?rq=1 - Arkana

可能是如何确定HTML表单上的默认提交按钮？的重复问题。 - Peter

Answer 1

认为这个代码应该可以工作（只在PC上测试了IE10）：

button { outline: 0; }

想要去除背景（在WebKit/Blink上需要）？

添加：

background: none;

需要去掉边框（也会删除IE10中的背景）：

border: 0;

- Ben Frain

---

在Chrome中，button {outline: 0;}解决了问题。我已经删除了背景和边框，但是当我在Chrome中点击按钮时仍然有一个蓝色的边框。 - Mark Rummel

这是你应该给作者信用并选择其作为答案的正确答案。 - samuelkobe

Answer 2

使用此代码：

button { border:0;}

- Touhid Rahman

---

有没有办法拥有自己的自定义边框，但不是那个蓝色内部边框？我只能同时去掉两个或一个都不去掉... - thomthom

Answer 3

我的解决方案（经过几个月的努力）

button:focus {
outline: 0;
box-shadow: none;
}

- Joe RR

Answer 4

这可能会对你有所帮助。使用以下CSS属性：

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

- Butani Vijay

---

这个操作去掉了我想保留的点状线，但没有去掉那个蓝色边框。 - Peter

请尝试这个。我希望它能帮到你。 输入 { background: none transparent; border: none; } 演示链接：http://jsfiddle.net/dEvKb/64/ - Butani Vijay

很抱歉，但这会移除按钮的默认样式（“有没有办法使用CSS移除它而不覆盖整个按钮样式？”）。 - Peter

Answer 5

使用以下代码：

button {
    border : 0px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
     border-radius:7px;
}

- Mohammad Areeb Siddiqui

Answer 6

#sideToggle:focus, #sideToggle:active{
  outline: 0;     
  outline-style:none;     
  outline-width:0;
}

如果其他人访问这篇帖子，这解决了我的问题。我单独添加了自己的样式，因为它们并不是解决问题的核心。

- crazyjedi98

Answer 7

button{border:none; border-radius:4px; -moz-border-radius:4px;}

- anon

Answer 8

只需添加border-radius即可开发按钮外观：

-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;

- Touhid Rahman

---

那也会改变布局，你实际上会尝试发布的东西吗？还是你只是在猜测？ - Peter

我已经从事编程工作5年了。如果在解决一个问题的过程中出现了新的问题，你应该怀疑自己的技能，而不是责怪给你解决问题的人。 - Touhid Rahman

@TouhidRahman 一个建议，请不要把它当成冒犯，但请记住，如果您的答案不符合OP的要求，或者您的答案看起来毫不费力，那么您可能会得到负面评价。如果您认为无法完全实现OP想要的内容，请解释为什么不可能（或简单地说“不可能”），然后给出您的替代方案，这样OP至少可以看到您已经尝试过了。否则，看起来您只是想成为最快的枪手 ;) - Arkana

@Arkana 谢谢你的建议。但当有人在你没有犯错并且你在这里帮助他时批评你，真的很伤人。 - Touhid Rahman

@TouhidRahman，我的意思不是要伤害你，但在我看来，你在几分钟内发布了两个快速修复方案，甚至没有完全阅读问题...问题明确说明“有没有办法使用CSS删除它，而不覆盖整个按钮样式？”。如果我冒犯了你，那真的很抱歉，这不是我发表评论的原因... - Peter

@Petroj：我是第一个回复的，因为我知道这个问题，并且作为前端开发人员，我经常处理这些问题。没关系，朋友，很高兴认识你。 - Touhid Rahman