ansaurus

Question

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

Answer 1

+1 A:

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>

Oli 2008-09-24 10:54:33

Wrapping the button in a span to keep it inline works nicely in IE, but the top and bottom borders are missing in Firefox (hiding behind the button).

Magnar 2008-09-24 10:57:07

Perhaps give the button 1px margin? That would mean there's less area for the user to click.. but not much..

Oli 2008-09-24 10:58:35

I tried the 1px margin, but it did not "push" the span up or down - only to the left and right.

Magnar 2008-09-24 10:59:46

Try setting the background on span.button input to none...

Oli 2008-09-24 11:03:33

Answer 2

A:

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 2008-09-24 10:55:23

The button tag would be a nice solution, but unfortunately IE and FF treats them differently.

Magnar 2008-09-24 10:58:00

Answer 3

+1 A:

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 2008-09-24 10:56:21

Answer 4

+8 A:

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>

Oli 2008-09-24 11:07:14

That does indeed work, so I must have some other CSS-rules interfering. Thanks!

Magnar 2008-09-24 11:13:12

The trick was adding background: none, so that the borders could shine through.

Magnar 2008-09-24 11:15:00

Answer 5

A:

If you apply a float: left the border will go away. I prefer this over the span trick.

2008-12-05 16:47:27

Answer 6

A:

Artı Ajans using this sample. Open web sites source and copy this forms element.

2008-12-27 13:13:31

Answer 7

+1 A:

Hey MAGNAR

FF 2.0 supports -moz-inline-block...

2009-01-23 22:07:59

Answer 8

+2 A:

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.

nickmorss 2009-04-24 13:04:31

Answer 9

A:

I think the best solution is the one Oil mentioned where adding background:none. i'm not expert on design but i have the will to learn. Magnar, maybe we can par-programing together one day?:)

My invite are still pending....

Rida 2009-05-29 10:00:52

Answer 10

+1 A:

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!

2009-07-20 07:37:02

Answer 11

A:

I've just added ONLY border:0; and thats it!!! Everything work in IE6 and IE7))

2009-08-19 14:39:38

Answer 12

A:

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

PlanetMaster 2010-01-11 15:52:22

Answer 13

A:

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>

Benxamin 2010-02-05 21:52:40

Answer 14

+2 A:

Hi all,

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>

rexusdiablos 2010-04-28 00:14:34

Answer 15

+1 A:

I know I'm almost 2 years late to the game, but I found another solution(at least for IE7).

If you add another input type="submit" to your form BEFORE any other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.

This works for me (overflow needs to be "auto"):

<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />

Note: I am using an HTML5 doctype (<!doctype html>).

David Murdoch 2010-07-29 18:25:12

Answer 16

A:

Filter chroma works as a charm using the button tag. Thanks for this answer saved me a lot of time.

Cristobal Dabed 2010-09-13 09:51:35

ansaurus

tags:

views:

answers:

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

related questions