IE9 Submit buttons are defaulting to highlighted

Get Started
1

Hi guys,

I’m working on a site, and I’m finding that in IE 9 only, upon rendering the page, ALL submit buttons are highlighted as if they are selected/in focus.

Doesn’t happen to me on FF, Opera, Chrome, or IE7/8

I’ve setup a small demo page

http://65.175.116.253/buttontest.html

It’s just two basic forms. If you pull it up in IE9, you’ll notice the two submit buttons are highlighted, meaning the border is accented in blue. if you click on any of the fields in one of the forms, then click onto the other form, the highlights will disappear, I guess because that formset is no longer in focus.

This won’t happen if you pull it up in FF, Opera, Chrome, etc. Even if form is in focus, neither of these browsers will highlight the button.

Basically, it’s like the are being set to ‘auto-focus’ as soon as the page renders. I wouldn’t mind the buttons being highlighted when someone clicks the form, but when I have a page that loads and it has 4 different forms on it, the color of the border of the submit buttons is being over-ridden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<title>Untitled</title>
	</head>

<body>

<form action="" method="post" name="login">

	<h3>login</h3>

	email: <input type="text" name="email" size="12"><br>
	password: <input type="password" name="password_a" size="6"><br>
	<input type="submit" name="submit1" value="log in" >

</form>

<br>
<br>
<br>

<form action="" method="post" name="login">

	<h3>Other Form</h3>

	input 1: <input type="text" name="email" size="12"><br>
	input 2: <input type="password" name="password_a" size="6"><br>
	<input type="submit" name="submit2" value="submit" >

</form>

</body>
</html>
2

Hi jasonallen19. Welcome to SitePoint. :slight_smile:

That blue highlihgting is the default for IE9, so nothing unusual there.

I think what’s throwing IE in terms of the highlighting when you click on form elements is the name=“login” inside each form tag. I don’t think the name attribute belongs there at all, but at least it should be different in each form. Unless you have a special reason for placing it there (one that I’m not aware of), just remove it altogether.

3

Hi,

Thanks. I don’t think it’s the login thing. I can change that to anything and it still does it. The problem is, if you pull up the page, you’ll find that ‘both’ submit buttons are highlighted. This only occurs in IE9. If you pull the page up in any other browser, the buttons are displayed normally.

It’s only if you do something on the page, such as click on one of the form fields, then click off to the other form, that the highlight will go away and the button will display normally, according to it’s style.

I went ahead and edited the code, both in my original quote, and on the live example to remove the login and you can see it still persists. I could understand ‘1’ form submit button becoming focus, but if I put 5 forms on the page, ALL submit buttons will be highlighted as if they were in focus. It’s weird.

4

No, that’s just how IE9 styles submit buttons, as I see that same styling in IE9 on all forms. The fact that you have the same name on both forms is confusing the browser. If I rename one of them (or better, remove them both) the strange behavior stops.

5

Edit: apparently I can’t edit the OP, so here is the updated code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<title>Untitled</title>
	</head>

<body>

<form action="" method="post" name="test1">

	<h3>first form</h3>

	email: <input type="text" name="email" size="12"><br>
	password: <input type="password" name="password_a" size="6"><br>
	<input type="submit" name="submit1" value="log in" >

</form>

<br>
<br>
<br>

<form action="" method="post" name="test2">

	<h3>Other Form</h3>

	input 1: <input type="text" name="email" size="12"><br>
	input 2: <input type="password" name="password_a" size="6"><br>
	<input type="submit" name="submit2" value="submit" >

</form>

</body>
</html>
6

I don’t think I’m communicating the issue clearly. It doesn’t have anything to do with form names.

I’ve renamed the forms to something besides login. If you check the new code, it’s been done. I posted the wrong code above and I can’t edit the post… Just view the source. I have another site hosted (which I don’t want to post here, but I can pm you), that has about 6 different submit buttons on it, and they are all being highlighted when the page loads.

You can also see the example at

http://65.175.116.253/buttontest.html

Just to be clear, I’ve included two screen shots.

http://65.175.116.253/button_firstload.gif

In this first screen shot, you can see that both submit buttons have a highlighted black border. They appear this way when the page first loads. This is not the ‘normal’ style, but the ‘focus’ style.

http://65.175.116.253/button_afterfocus.gif

In this screen shot, I have clicked into the first textfield of the 2nd form, which manually put the focus on the 2nd form. Because of this, the ‘highlight’ around the first form’s submit button is cleared and returns to normal style.

How do I keep IE9 from doing this? It’s focus style is trumping my styling and it messes up the way buttons look.

7

Like it or not, I think that’s the default behavior of the submit button in IE9. It’s the same on every form I’ve seen that uses the default submit button. It may be possible to style it differently, but I haven’t tried it myself. I usually find it’s not worth trying to change default behavior like that. Probably better to use a <button> if you want to control the look.