40

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

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

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

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

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

4

18 回答 18

31

好吧，这在这里有效：

<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-24T11:07:14.117 回答
28

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

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

为我工作。

于 2009-04-24T13:04:31.800 回答
8

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

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

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

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

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

于 2010-07-29T18:25:12.747 回答
2

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

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

<form><fieldset><input type="submit"></fieldset></form>
于 2010-04-28T00:14:34.577 回答
2

我能够将 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");
        }

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

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

于 2011-11-08T17:27:34.907 回答
2

我正在建立@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-28T20:41:57.657 回答
1

对，这是一个让你权衡的丑陋解决方案......将按钮粘贴在 a 中<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-24T10:54:33.913 回答
1

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

<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 不支持它。

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

于 2008-09-24T10:56:21.927 回答
1

我认为 filter:chroma(color=#000000); 正如之前提到的那样是最好的，因为您可以在某些课程中申请。否则，如果您当然正在使用课程，您将不得不在您拥有的每个按钮上应用一个额外的标签。

.buttonStyle { filter:chroma(color=#000000); 背景-颜色：#E5813C 纯色；BORDER-BOTTOM：#cccccc 1px 实心；左边框：#cccccc 1px 实心；右边界：#cccccc 1px 实心；边框顶部：#cccccc 1px 实心；颜色：#FF9900; 字体系列：Verdana、Arial、Helvetica、sans-serif；字体大小：10px；字重：粗体；文字装饰：无；} 这为我做到了！

于 2009-07-20T07:37:02.057 回答
1

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

于 2010-11-06T01:00:42.843 回答
1

这将起作用：

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

这甚至适用于button标签，最终您可以安全地使用background-imagecss 属性。

于 2012-02-15T10:29:25.220 回答
1

这个问题的正确答案是：

outline: none;

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

于 2012-10-10T21:46:52.377 回答
0

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

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

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

于 2008-09-24T10:55:23.473 回答
0

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

于 2010-01-11T15:52:22.203 回答
0

使用推拉门技术，spans在内部使用两个button。并消除buttonIE 覆盖中的任何格式。

<button><span class="open">Search<span class="close"></span></span></button>
于 2010-02-05T21:52:40.040 回答
0

我（还）不能发表评论，所以我必须以这种方式添加我的评论。我认为大卫默多克先生的建议对 Opera 来说是最好的（这里）。天哪，顺便说一句，他有一个多么可爱的女孩。

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

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

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

于 2011-11-15T01:54:06.097 回答
0

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

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

如果你的背景是白色的。

于 2012-01-05T11:09:10.160 回答
0

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

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

从@Mark's 答案中得到它并仅为 IE 加载它。

于 2014-12-23T10:58:41.243 回答