Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 403
Magnar Avatar asked Sep 24 '08 10:09

Magnar


2 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> 
like image 160
Oli Avatar answered Oct 16 '22 08:10

Oli


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.

like image 27
nickmorss Avatar answered Oct 16 '22 10:10

nickmorss