Black border appearing on <button> element

Hi all,

This is only happening in IE by the way

I’ve had a good search for a solution to this (this is probably the closest I came)

Not only is a black border appearing on the focus/active states of a <button> element in IE but it appears on the <button> when the associated text field gains focus. So I’m stumped!

This is the markup

<form class="search" action="post">
	<label for="search">Search</label>
	<input type="text" name="search" id="search" />
	<button type="submit">Search</button>
</form>

Many thanks

We really need to see your style sheet to help with this. That will allow us to see what’s causing the problem. :slight_smile:

No problem, see attached : )

In IE9, the button seems to follow the rules set:

button:focus,
button:active {
	border: 1px solid #cdd8e0;   /* this is the same as the "normal" state border */
	outline: 0;
}

.button:hover, input[type="submit"]:hover, .prev-next a:hover, button:hover {
	background: #AD28E8;
	color: #fff;
}

What version of IE are you working with?

Apologies, I have’t checked it in IE 9 just 8 and below

OK, same in IE8, so it must be the default hover style for buttons in IE generally. In that case, you could just specify the hover border color explicitly:

[COLOR="Red"]button:hover,[/COLOR]
button:active,
button:focus {
	border: 1px solid #cdd8e0; 
	outline: 0;
}

But it’s not happening on hover, it’s when I click into a textfield that is part of the same form

Looks like it was IE compatibility mode that was to blame

In IE6 and 7 the only way to stop the border from changing is to remove it from the start. I guess that was the issue if you were in compatibility mode.