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

Magnar_1123 0
Viewed 65424

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.

internet-explorer css
18 Answers

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

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.

user_910070

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

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.

Magnar_11230

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!

Admin1

A hackish solution might be to use markup like this:

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

and apply your border styles to the span element.

_Lasar_94380

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

user_1898020

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