Any way to remove IEs black border around submit button in active forms?

Question

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         


        

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

The correct answer to this qustion is:

outline: none;

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

Answer 5

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!

Answer 6

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.