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

enter image description 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?

Mark Mintoff · Accepted Answer · 2012-03-23T15:29:21.317

8

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;
    }

edited Mar 23 '12 at 15:29

answered Feb 24 '12 at 09:26

Mark Mintoff

282
3
5

Although it does remove the black border, unfortunately it makes it impossible to use filters on a button (gradients for instance) – skip405 Aug 15 '12 at 13:35
In such a case, you can easily add a background image with a gradient. Yes it's a workaround, but what isn't when it comes to IE? – Mark Mintoff Aug 21 '12 at 13:32
3

Just something I discovered today: this *does* fix the black border in IE7 - but *not* IE10 (and possibly IE9) in "IE7" mode. As that mode is meant for testing, it's not really an issue, but something to be aware of. I spent a lot of time trying to figure out why it didn't work, only to finally try an actual IE7 install. That testing mode is an approximation of IE7, but obviously isn't quite the same thing. – chipcullen Feb 06 '13 at 18:40

score 3 · Answer 2 · edited May 23 '17 at 12:01

3

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:

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).
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.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 02 '12 at 15:19

mdellanoce

296
1
6

I'm working on a big site with LOTS of buttons.. Isn't there an easier way of redoing all of these only for IE7? I'm thinking a jQuery script/plugin or some CSS "hack" – Jan 06 '12 at 12:00
For now I just removed the border only in IE7.. Just hoped there was a better solution :/ – Jan 06 '12 at 13:34

score 1 · Answer 3 · answered Oct 25 '12 at 05:17

1

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

answered Oct 25 '12 at 05:17

Luke Snowden

4,056
2
37
70

At first thought I assumed it would work, but in `IE 7` it does not. [`Here is what I tried`](https://gist.github.com/b270aa95c04a665df128.git) – Shubh Dec 23 '14 at 08:26

score 0 · Answer 4 · answered Aug 23 '13 at 19:58

0

javascript:

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

answered Aug 23 '13 at 19:58

Frank

658
1
8
12

Black border on IE7 buttons on textarea/input focus

4 Answers4

Linked