English 中文(简体)
有什么方法可以删除活动表单中提交按钮周围的IE黑边框吗?
原标题:
  • 时间:2008-09-24 10:46:10
  •  标签:

我正在实现一个使用自定义样式的提交按钮的设计。它们是非常简单的浅灰色按钮,外部边界略暗:

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

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

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

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

最佳回答

这在这里有效:

<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,因此请仅将其用于IE。对于其他浏览器,具有与相同的边框,但对于IE使用滤镜:色度。。。

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

为我工作。

我知道我在游戏中迟到了将近2年,但我找到了另一个解决方案(至少对于IE7)。

如果在表单中的任何其他提交按钮之前,将另一个输入type=“submit”添加到表单,则问题将消失。现在你只需要隐藏这个新的黑色边框吸收按钮。

这对我有效(溢出需要“自动”):

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

注意:我使用的是HTML5 doctype(<;!doctype html>;)。

我在另一个论坛上找到了一个对我有用的答案。它删除了ie6和ie7中不需要的黑色边界。很可能你们中的一些人/许多人没有在表单标签中定位输入=“submit”。不要忽视这一点。在尝试了所有其他内容后,它对我有效。

如果您正在使用提交按钮,请确保它在表单中,而不仅仅是字段集:

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

我能够将David Murdoch的建议与一些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");
        }

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

这是有效的,但不知怎么的,确实感觉有点不对。

我正在以@nickmoss的例子为基础,使用过滤器,但这并不适合我的情况。。。使用发光滤镜对我来说效果要好得多。

<!--[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]-->

好吧,好吧,这里有一个丑陋的办法让你称重。。。将按钮插入<;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>

我找到的最好的解决方案是将边界移动到包装元素,如下所示:

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

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

I think filter:chroma(color=#000000); as metnioned a wile ago is the best as you can apply in certain class. Otherwise you will have to go and apply an extra tag on every button you have that is if you are using classes of course.

.buttonStyle { filter:chroma(color=#000000); BACKGROUND-COLOR:#E5813C solid; 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: bold; TEXT-DECORATION: none; } That did it for me!

我遇到了这个问题,并在按钮周围添加了一个div,将其显示为一个块,然后手动定位。IE和FF中按钮的利润率太不可预测了,他们都不可能满意。我的提交按钮必须与输入完全对齐,所以如果不将项目定位为块,它就无法工作。

这将起作用:

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

这甚至适用于按钮标记,最终您可以安全地使用背景图像css属性。

这个问题的正确答案是:

outline: none;

…据我所知,适用于IE和Chrome。

一个棘手的解决方案可能是使用这样的标记:

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

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

add *border:none this removes the border for IE6 and IE7, but keeps it for the other browsers

使用滑动门技术,在按钮内部使用两个跨度。并消除IE覆盖中按钮上的任何格式设置。

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

我还不能发表评论,所以我必须用这种方式添加我的评论。我认为大卫·默多克先生的建议对歌剧院来说是最好的(这里)。天哪,顺便说一句,他得到了一个多么可爱的女孩。

我在Opera中尝试过他的方法,基本上以这种方式将输入标签翻了一番:

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

通过这种方式,第一个元素被隐藏,但它卡住了Opera将给予第二个输入元素的显示焦点。喜欢它!

At least in IE7 you can style the border althogh you can t remove it (set it to none). So setting the color of the border to the same color that your background should do.

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

如果你的背景是白色的。

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

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

@标记s回答并仅为IE加载它。





相关问题