Border Around IE6, 7, 8 Form Submit Button

IEs have an interesting behavior around forms that may drive pixel-perfect designers and implementers nuts.  In certain conditions, IE6, 7 and 8 will “enhance” the form functionality by showing you which button is the submit button by drawing a black, 1 px border around it.

If you’re like most web-devs, you style inputs, textareas, and especially buttons to match the look-and-feel of the overall site.  Usually that entails setting properties like background-image and border.

The issue can be reproduced when the following criteria is fulfilled:

  1. use a form in your site
  2. use the standard <input type=”submit” /> button to trigger form submission
    • OR use the <button type=”submit”> to trigger form submission
  3. style the button visually using CSS

My test page can be downloaded here: test page

In this image, we see a standard form in IE7 with one text input field and one submit button.  Both the inputs are styled with a 1px solid #ccc border and #eee background-color.  Pardon the horrible render; MS Paint doesn’t have a lot of options for export.


In this image we see the same form in IE7 with focus (by clicking into the text input field).


It’s a subtle change, and most won’t notice it.  It only becomes an issue if your UI/UE team gets really antsy about visual changes that they didn’t want.

Two simple fixes come immediately to mind.

  1. Change the <input type=”submit” /> or <button> to a simple button and trigger the submit with javascript.
  2. Implement a CSS fix that tricks IE into not displaying the border.

For solution 2, the fix is a pretty straightforward one with some caveats.  Add this bit of CSS to whatever style cascades down to the submit button:

.fixIE {
filter : chroma(color=#000000);


“Filter” is IE-specific.  “Chroma” will set to transparent whichever color is cited, so in the above case, if an element has or inherits the “fixIE” class, anything with the color #000000 (or black) will be set to transparent.

The caveats should be obvious.  Not only will the extra border be transparent, but if the default text color or background-color is #000, it will be rendered transparent.

There’s a slightly less-obvious caveat as well to this.  Even as the color itself is rendered transparent, IE will still draw the border around the button.  The net effect is that as the form receives focus, the submit button will act as if  a 1px margin was applied around the element, and it will visually contract.  It will expand back out to the previous size if focus moves to some other element in the page not contained by the form.

Pretty ugly hack, and I’m inclined to tell you to just use fix 1.