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.
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With