Black border on IE7 buttons on textarea/input focus

Question

I've run into a weird IE7 problem..

I have some standard CSS styled buttons with a background picture and a solid 1px blue border. They work as supposed except in IE7..

If I click inside a form element (textarea/input-field) it automatically adds a black border on my buttons.. Sometimes it also happends in other cases where elements are in focus/active..

You can see a simple example here

The thing is that I need the border on the buttons for styling reasons, so isn't there a way of disabling this behaviour in IE7 without removing the original border - either with CSS or jQuery?

Answer 1

I blogged about this issue here: http://markmintoff.com/2012/01/remove-internet-explorer-black-border-around-button/

Essentially you can use the following style to remove the offending border simply and effectively.

    input[type=submit],
    input[type=reset],
    input[type=button]
    {
        filter:chroma(color=#000000);
        color:#010101;
    }

Answer 2

IE is highlighting the form's "default" button, the button that will be triggered if you press the enter key inside one of the form inputs. To disable the highlighting, you have a couple options:

1. Make the save button type="button" instead of type="submit", and handle the form submission by handling the button's click event in javascript. This was the answer to this related question (although ASP.NET is handling the javascript part behind the scenes).
2. Add a second type="submit" button as the first input in the form, then hide it with CSS. Note that display:none; will not cut it, you need to hide it by positioning it off screen with something like: position: absolute; top: 0; left: -9999px;. This was the answer to this related question.

Answer 3

jquery: $('input[type="submit"]').focus().blur();

Answer 4

javascript:

document.getElementById('save').focus();
document.getElementById('save').blur();