Question

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

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

这在Firefox，Safari和Opera中看起来很合适。问题出在Internet Explorer 6和7上。

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

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

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

Answer 2

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

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

为我工作。

Answer 3

我知道我差不多2年了，但我找到了另一个解决方案（至少对于IE7而言）。

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

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

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

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

Answer 4

我找到了一个在另一个论坛上适合我的答案。它删除了ie6和ie7中不需要的黑色边框。很可能你/你们中的许多人没有在表格标签中定位你的输入=“提交”。不要忽视这一点。尝试一切后，它对我有用。

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

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

Answer 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");
        }

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

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

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

Answer 7

是的，这里有一个丑陋的解决方法让你称重......将按钮放在<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>

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

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

Answer 9

我想滤波器：色度（颜色=＃000000）;因为你可以在某些课堂上申请，所以最好的学习是最好的。否则，如果您正在使用课程，则必须在每个按钮上应用额外的标签。

.buttonStyle { 滤波器：色度（颜色=＃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; FONT-SIZE：10px; FONT-WEIGHT：大胆; 文字装饰：没有; } 这样做对我来说！

Answer 10

这将起作用：

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

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

Answer 11

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

Answer 12

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

<!--[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 answer获取并仅为IE加载。

Answer 13

至少在IE7中你可以设置边框althogh你不能删除它（设置为none）。因此，将边框的颜色设置为与背景应该相同的颜色。

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

如果你的背景是白色的。

Answer 14

我无法发表评论，所以我必须以这种方式添加我的评论。我事先David Murdoch先生的建议是Opera的最佳建议（here）。天哪，他有多可爱的女孩。

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

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

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

Answer 15

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

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

Answer 16

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

Answer 17

一个hackish解决方案可能是使用这样的标记：

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

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

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

17 个答案: