有啥方法可以删除活动表单中提交按钮周围的 IE 黑色边框？

Posted 2023-03-06

技术标签:

【中文标题】有啥方法可以删除活动表单中提交按钮周围的 IE 黑色边框？【英文标题】：Any way to remove IEs black border around submit button in active forms?有什么方法可以删除活动表单中提交按钮周围的 IE 黑色边框？ 【发布时间】：2010-09-12 16:34:37 【问题描述】：

我正在实现一个使用自定义样式提交按钮的设计。它们是非常简单的浅灰色按钮，外边框稍暗：

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

这在 Firefox、Safari 和 Opera 中看起来恰到好处。问题出在 Internet Explorer 6 和 7 上。

由于表单是页面上的第一个表单，因此它被视为主表单 - 因此从一开始就处于活动状态。活动表单中的第一个提交按钮在 IE 中会收到一个纯黑色边框，以将其标记为主要操作。

如果我关闭边框，那么 IE 中的黑色额外边框也会消失。我正在寻找一种方法来保持我的正常边框，但删除轮廓。

【问题讨论】：

【参考方案1】：

这在这里有效：

<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>

【讨论】：

这确实有效，所以我必须有一些其他的 CSS 规则干扰。谢谢！诀窍是添加背景：无，以便边框可以发光。我不知道为什么，但是如果我添加 HTML5 doctype () 顶部和底部边框不会显示... 如果您使用 HTML5 文档类型，我发现您可以通过在顶部和底部添加 1px 边距来获得顶部和底部边框（即更改边距：0 到边距：1px 0 1px 0;） 【参考方案2】：

如果您不想为输入/按钮添加包装器，请尝试执行此操作。由于这是无效的 CSS，因此仅适用于 IE。具有其他浏览器的边框，但使用 filter:chroma 用于 IE...

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

</style>
<![endif]-->

为我工作。

【讨论】：

是的，当您无法将按钮包装在包装器跨度中时，这种方法会更好。 【参考方案3】：

我知道我迟到了将近 2 年，但我找到了另一个解决方案（至少对于 IE7）。

如果您在表单中添加另一个input type="submit"在表单中的任何其他提交按钮之前，问题就会消失。现在你只需要隐藏这个新的黑色边框吸收按钮。

这对我有用（溢出需要是“自动”）：

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

注意：我使用的是 HTML5 文档类型 (<!doctype html>)。

【讨论】：

【参考方案4】：

我在另一个论坛上找到了适合我的答案。它删除了 ie6 和 ie7 中不需要的黑色边框。你们中的一些人/很多人可能没有在表单标签中定位您的 input="submit"。不要忽视这一点。在尝试了其他一切之后，它对我有用。

如果您使用的是提交按钮，请确保它位于表单中，而不仅仅是字段集：

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

【讨论】：

【参考方案5】：

我能够将 David Murdoch 的建议与一些 JQuery 结合起来，这样该修复程序将自动应用于页面上的所有 'input:submit' 元素：

// 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");

您可以将其包含在母版页或等效页面中，以便将其应用于您网站中的所有页面。

它有效，但感觉有点不对劲，不知何故。

【讨论】：

【参考方案6】：

我正在使用 @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]-->

【讨论】：

无论出于何种原因，像 nickmorr 建议的那样使用 filter: chroma()，如果我使用 CSS 属性选择，它就会停止工作。使用您的边框和过滤器属性已为我修复了它。太棒了！【参考方案7】：

好吧，这里有一个丑陋的解决方案供您权衡... 将按钮粘贴在 <span> 中，核对按钮的边框并将边框改为 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>

【讨论】：

将按钮包裹在一个跨度中以使其保持内联在 IE 中效果很好，但在 Firefox 中缺少顶部和底部边框（隐藏在按钮后面）。也许给按钮1px的边距？这意味着用户可以点击的区域更少..但不多.. 我尝试了 1px 边距，但它并没有向上或向下“推动”跨度 - 只是向左和向右。【参考方案8】：

我找到的最佳解决方案是将边框移动到包装元素，如下所示：

<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;

此解决方案的主要问题是按钮现在是块元素，并且需要固定宽度。我们可以使用 inline-block，只是 Firefox2 不支持。

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

【讨论】：

【参考方案9】：

我认为过滤器：色度（颜色=#000000）；正如之前提到的那样是最好的，因为您可以在某些课程中申请。否则，如果您当然正在使用类，您将不得不在每个按钮上应用一个额外的标签。

.buttonStyle 过滤器：色度（颜色=#000000）；背景-颜色：#E5813C 纯色； BORDER-BOTTOM：#cccccc 1px 实心；左边框：#cccccc 1px 实心；右边界：#cccccc 1px 实心；边框顶部：#cccccc 1px 实心；颜色：#FF9900; 字体系列：Verdana、Arial、Helvetica、sans-serif；字体大小：10px；字重：粗体；文字装饰：无；那是为我做的！

【讨论】：

【参考方案10】：

我遇到了这个问题，并用按钮周围的 div 解决了这个问题，将其显示为一个块，然后手动定位它。 IE 和 FF 中按钮的边距太不可预测了，他们都没有办法感到高兴。我的提交按钮必须与输入完美对齐，因此如果不将项目定位为块，它就无法工作。

【讨论】：

【参考方案11】：

这将起作用：

input[type=button]

       filter:chroma(color=#000000);

即使使用 button 标记也可以使用，最终您可以安全地使用 background-image css 属性。

【讨论】：

【参考方案12】：

这个问题的正确答案是：

outline: none;

...据我所知，适用于 IE 和 Chrome。

【讨论】：

很惊讶这不是在顶部。关于去除轮廓的问题，为什么有这么多使用边框和色度滤镜的答案？啊哈，IE 6-7 不支持大纲：caniuse.com/#feat=outline【参考方案13】：

一个骇人听闻的解决方案可能是使用这样的标记：

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

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

【讨论】：

按钮标签会是一个不错的解决方案，但不幸的是 IE 和 FF 对待它们的方式不同。【参考方案14】：

添加 *border:none 这将删除 IE6 和 IE7 的边框，但保留其他浏览器的边框

【讨论】：

【参考方案15】：

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

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

【讨论】：

【参考方案16】：

我（还）不能发表评论，所以我必须以这种方式添加我的评论。我认为 David Murdoch 先生的建议最适合 Opera (here)。天哪，顺便说一句，他有一个多么可爱的女孩。

我在 Opera 中尝试过他的方法，我基本上成功地通过这种方式将输入标签加倍：

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

这样第一个元素是隐藏的，但它会捕获 Opera 将显示焦点提供给第二个输入元素。爱它！

【讨论】：

【参考方案17】：

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

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

如果你的背景是白色的。

【讨论】：

【参考方案18】：

对我来说，下面的代码确实有效。

<!--[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 上加载。

【讨论】：

以上是关于有啥方法可以删除活动表单中提交按钮周围的 IE 黑色边框？的主要内容，如果未能解决你的问题，请参考以下文章

由于隐藏按钮，Enter 无法在 IE 中提交表单

玩魔兽时出现问题，在战网上提交问题提交不上，提交一个表单按钮是灰色的，求助！

阻止 IE 突出显示表单中的第一个提交按钮

如何确定 jQuery 表单插件中的活动提交按钮？

求C# winform中点击按钮执行网页JS提交表单代码实现~~!

通过单选按钮更改 Jquery 表单提交