任何方式去除IE的黑色边框提交的活性形式按钮？

我实现使用自定义样式提交-按钮的设计。他们是很简单的浅灰色的按钮用稍深的外边框：任何方式去除IE的黑色边框提交的活性形式按钮？

input.button { 
    background: #eee; 
    border: 1px solid #ccc; 
}

这看起来正好在Firefox，Safari和Opera。问题是与IE浏览器，都6和7

因为形式是页面上的第一个，就计算为主要形式 - 因而激活从一开始走。活动表单中的第一个提交按钮在IE中收到一个纯黑色边框，以将其标记为主要操作。

如果我关闭边界，然后在IE黑色边框外消失了。我正在寻找一种方法来保持我的正常边界，但删除轮廓。

来源

2008-09-24 Magnar

嗯，这在这里工作：

<html> 
    <head> 
     <style type="text/css"> 
      span.button { 
       background: #eee; 
       border: 1px solid #ccc; 
      } 

      span.button input { 
       background:none; 
       border:0; 
       margin:0; 
       padding:0; 
      } 
     </style> 
    </head> 
    <body> 
     <span class="button"><input type="button" name="..." value="Button"/></span> 
    </body> 
</html>

来源

2008-09-24 11:07:14 Oli

对，这里是一个丑陋的解决方案，让您称重......将按钮放在<span>中，将按钮的边框加以核化，并将边框改为跨度。

IE是有点玄乎关于表单元素利润率所以这可能不是精确的工作。也许给这个跨度和按钮的背景相同可能会有所帮助。

span.button { 
    background: #eee; 
    border: 1px solid #ccc; 
} 

span.button input { 
    background: #eee; 
    border:0; 
}

和

<span class="button"><input type="button" name="..." value="Button"/></span>

来源

2008-09-24 10:54:33 Oli

在一个范围内包围按钮以保持内联在IE中很好地工作，但是在Firefox中隐藏了顶部和底部边框（隐藏在按钮后面）。 – Magnar 2008-09-24 10:57:07

也许给按钮1px的余量？这意味着用户点击的面积会减少，但不会太大。 – Oli 2008-09-24 10:58:35

我尝试了1px的边距，但它并未“向上”或“向下”推动跨度 - 仅限于左侧和右侧。 – Magnar 2008-09-24 10:59:46

一个hackish的解决办法可能是使用类似这样的标记：

<button><span>Go</span></button>

并应用边框样式的span元素。

来源

2008-09-24 10:55:23 Lasar

按钮标记将是一个很好的解决方案，但不幸的是IE和FF对待它们的方式不同。 – Magnar 2008-09-24 10:58:00

我已经找到了最好的解决办法，就是边界移动到包装元素，像这样：

<div class='submit_button'><input type="submit" class="button"></div>

有了这个CSS：

.submit_button   { width: 150px; border: 1px solid #ccc; } 
.submit_button .button { width: 150px; border: none; }

这种解决方案的主要问题是，该按钮现在是一个块元素，并且需要固定宽度。我们可以使用内联块，但Firefox2不支持它。

任何更好的解决方案是值得欢迎的。

来源

2008-09-24 10:56:21 Magnar

，如果你不想给一个包装添加到输入/按钮，然后尝试这样做。由于这是无效的CSS，所以只适用于IE浏览器。有其他浏览器的边框，但使用过滤器：IE的色度... ...

<!--[if IE]> 
<style type="text/css"> 
input { 
filter:chroma(color=#000000); 
border:none; 
} 
</style> 
<![endif]-->

为我工作。

来源

2009-04-24 13:04:31 nickmorss

我认为 filter：chroma（color =＃000000）;因为你可以在某个班级申请，所以最好的是最好的。否则，如果您正在使用课程，则必须在每个按钮上应用额外的标记。

。buttonStyle {filter：chroma（color =＃000000）; 背景颜色：＃E5813C固体; BORDER-BOTTOM：#cccccc 1px solid; BORDER-LEFT：#cccccc 1px solid; BORDER-RIGHT：#cccccc 1px solid; BORDER-TOP：#cccccc 1px solid; COLOR：＃FF9900; FONT-FAMILY：Verdana，Arial，Helvetica，sans-serif; 字体大小：10px;字体重量：粗体; TEXT-DECORATION：none; } 这是为我做的！

来源

2009-07-20 07:37:02

添加*边界：无这消除了对IE6和IE7的边界，但仍保留了其他浏览器

来源

2010-01-11 15:52:22

随着滑动门技术，使用两个spans的button内。并在您的IE覆盖中消除button上的任何格式。

<button><span class="open">Search<span class="close"></span></span></button>

来源

2010-02-05 21:52:40 Benxamin

我发现，对我的作品在另一个论坛回答。它删除ie6和ie7中不需要的黑色边框。很有可能你们中有些人还没有在form标签中定位你的输入=“提交”。不要忽视这一点。它试图一切其他。

如果您正在使用一个提交按钮，确保它是一个表单中，而不仅仅是一个字段：

<form><fieldset><input type="submit"></fieldset></form>

来源

2010-04-28 00:14:34 rexusdiablos

我知道我近2年晚了比赛，但我发现了另一个解决方案（至少对于IE7）。

如果你再添加一个input type="submit"到你的表格之前其他任何提交按钮的形式问题都会消失。现在你只需要隐藏这个新的黑色边框吸收按钮。

这对我的作品（溢出需要 “汽车”）：

<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />

注：我使用的是HTML5的doctype（<!doctype html>）。

来源

2010-07-29 18:25:12

我有这个问题，并解决它与围绕按钮的div，显示它作为一个块，并定位它手动。 IE和FF中按钮的边缘太不可预测，他们都无法幸福。我的提交按钮必须完美地与输入对齐，所以它不会将项目定位为块。

来源

2010-11-06 01:00:42 ang

我能够大卫默多克的建议与结合一些JQuery的，使得修补程序将自动适用于所有“输入：提交”元素在页面上：

// Test for IE7. 
if ($.browser.msie && parseInt($.browser.version, 10) == 7) { 
      $('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />') 
.insertBefore("input:submit"); 
     }

您可以包含此母版页或相当的，所以它适用于您的网站的所有网页。

它可以工作，但它确实感觉有点不对。

来源

2011-11-08 17:27:34 Holf

我不能评论（还），所以我必须添加我的评论这种方式。我的事大卫·默多克先生的建议是最好的歌剧（here）。 OMG，他是一个多么可爱的女孩。

我试过他的方法在Opera和我成功基本上加倍输入标签是这样的：

<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" /> 
<input type="submit" value="Go" />

这样的第1个要素是隐藏的，但它惹人显示焦点歌剧会给第二输入元素。爱它！

来源

2011-11-15 01:54:06 Tyler

我建立在@ nickmorss的使用过滤器的例子并没有真正解决我的情况......使用辉光过滤器取而代之对我来说工作得更好。

<!--[if IE]> 
<style type="text/css"> 
    input[type="submit"], input[type="button"], button 
    { 
     border: none !important; 
     filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1); 
     height: 24px; /* I had to adjust the height from the original value */ 
    } 
</style> 
<![endif]-->

来源

2011-12-28 20:41:57

至少在IE7可以样式边框althogh你无法将其删除（将其设置为无）。因此，将边框的颜色设置为与背景相同的颜色。

.submitbutton { 
background-color: #fff; 
border: #fff dotted 1px; 
}

如果你的背景是白色的。

来源

2012-01-05 11:09:10 Gregor

这是去工作：

input[type=button] 
{ 
     filter:chroma(color=#000000); 
}

这个工程即使有button标签，最终你可以安全地使用background-image CSS属性。

来源

2012-02-15 10:29:25

正确的答案，这是qustion：

outline: none;

...适用于IE和Chrome，在我的知识。

来源

2012-10-10 21:46:52

对我而言，下面的代码实际上工作。

<!--[if IE]> 
    <style type="text/css"> 
    input[type=submit],input[type=reset],input[type=button] 
     { 
      filter:chroma(color=#000000); 
      color:#010101; 
     } 
    </style> 
<![endif]-->

从@Mark'sanswer得到它和装载它仅用于IE。

来源

2014-12-23 10:58:41 Shubh

任何方式去除IE的黑色边框提交的活性形式按钮？

回答

相关问题