Any way to remove IEs black border around submit b

2019-01-06 10:23发布

站内文章 / HTML/CSS

16 0

贼婆χ

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:

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

This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7.

Since the form is the first one on the page, it's counted as the main form - and thus active from the get go. The first submit button in the active form receives a solid black border in IE, to mark it as the main action.

If I turn off borders, then the black extra border in IE goes away too. I am looking for a way to keep my normal borders, but remove the outline.

回答1:

Well this works here:

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

回答2:

if you dont want to add a wrapper to the input / button then try doing this. As this is invalid CSS then make sre its for IE only. Have the border as per for other browsers but use the filter:chroma for IE...

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

worked for me.

回答3:

I know I'm almost 2 years late to the game, but I found another solution (at least for IE7).

If you add another input type="submit" to your form before any other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.

This works for me (overflow needs to be "auto"):

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

Note: I am using an HTML5 doctype (<!doctype html>).

回答4:

I've found an answer that works for me on another forum. It removes the unwanted black border in ie6 and ie7. It's probable that some/many of you have not positioned your input="submit" in form tags. Don't overlook this. It worked for me after trying everything else.

If you are using a submit button, make sure it is within a form and not just a fieldset:

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

回答5:

I was able to combine David Murdoch's suggestion with some JQuery such that the fix will automatically be applied for all 'input:submit' elements on the page:

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

You can include this in a Master Page or equivalent, so it gets applied to all pages in your site.

It works, but it does feel a bit wrong, somehow.

回答6:

I'm building on @nickmorss's example of using filters which didn't really work out for my situation... Using the glow filter instead worked out much better for me.

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

回答7:

Right, well here's an ugly fix for you to weigh up... Stick the button in a <span>, nuke the border on the button and give the border to the span instead.

IE is a bit iffy about form element margins so this might not work precisely. Perhaps giving the span the same background as the button might help in that respect.

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

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

and

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

回答8:

The best solution I have found, is to move the border to a wrapping element, like this:

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

With this CSS:

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

The main problem with this solution is that the button now is a block-element, and needs to be fixed-width. We could use inline-block, except that Firefox2 does not support it.

Any better solutions are welcome.

回答9:

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!

回答10:

I had this problem and solved it with a div around the button, displayed it as a block, and positioned it manually. the margins for buttons in IE and FF was just too unpredictable and there was no way for them both to be happy. My submit button had to be perfectly lined up against the input, so it just wouldnt work without positioning the items as blocks.

回答11:

This is going to work:

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

This works even with button tag, and eventually you can safely use the background-image css property.

回答12:

A hackish solution might be to use markup like this:

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

and apply your border styles to the span element.

回答13:

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

回答14:

With the sliding doors technique, use two spans inside of the button. And eliminate any formatting on the button in your IE override.

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

回答15:

I can't comment (yet) so I have to add my comment this way. I thing Mr. David Murdoch's advice is the best for Opera ( here ). OMG, what a lovely girl he's got btw.

I've tried his approach in Opera and I succeeded basically doubling the input tags in this way:

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

This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!

回答16:

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 your background is white.

回答17:

The correct answer to this qustion is:

outline: none;

... works for IE and Chrome, in my knowledge.

回答18:

For me the below code actually worked.

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

Got it from @Mark's answer and loaded it only for IE.