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

Asked 2008-09-24T10:46:10.390

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.

css internet-explorer

Edit Report

3 Answers

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>

answered 2010-04-28T00:14:34.577

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.

answered 2012-02-15T10:29:25.220

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

answered 2010-01-11T15:52:22.203

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

3 Answers

Your Answer