Any way to remove IEs black border around submit b

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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 5

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>

Answer 6

The correct answer to this qustion is:

outline: none;

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