problem with text field and submit button

[sid7]

Hello,

I'm facing an annoying problem where a button's border colour changes when I click on the text fields in the same form.

I could use onfocus="blur();" on the text fields to resolve this, but then they will lose focus when selected.

So, I'm trying to find out where I can define this colour that the border changes to when text fields are selected. (i.e use camouflage so change of colour is not noticed)

// my css

input
{
padding: 4px; 
color:#888888; 
border: 1px solid #B4CFEC;
}

// my html

<form name="details" method="post" action="#">
<fieldset>
<input type="text" name="email" size="35" value="email" />
<input type="submit" name="login" value="login" />
</fieldset></form>

Any thoughts?

Thanks,
Sid

[Airshow]

Sid,

The effect you describe is designed to indicate which button's action will be triggered if the user hits enter when a form element has focus.

Personally I think this is a good idea as it help avoid user error.

If you must be rid of the effect, then simple set the button's borrder-with to zero. eg:

#submitButton {
    border-width : 0;
}

I've only checked this in IE6 so you might like to do some more comprehensive tests.

Airshow

[sid7]

Thanks for the response Airshow.

I tried your solution and it works. The only problem is, I have already defined a blue border for my submit button, so if I set border width to 0 I'll lose my own border.

Right now what happens is I click on my text field, and a new black border appears on top of the blue one I've defined.

[Airshow]

Sid,

In that case I don't think you can avoid it. At least not in IE, which renders the effect as something in addition to the normal box-model.

If you set border-width to something large - eg. 99px - then you can see that the effect is an extra border always 1px wide. For some reason when border-width is set to zero then the effect disappears. At border-width 1px or greater the effect is always 1px.

It's a pain.

I'm using IE6 here. I'm not sure about other browsers.

Airshow

[sid7]

ah, I understand. I guess I have to live with it.

Thanks for your time though, appreciated.

Sid

[Airshow]

Sid,

But of course, I'm being stupid.

Just use a regular <input type="button" ...> instead, and script it to give a submit action.

<input type="button" name="login" value="Login" onclick="this.form.submit();" />

But beware that if you do this then the form's onsubmit="...." will not fire (should you need it). You have to script any onsubmit action in the Login button's onclick, prior to this.form.submit(); .

Airshow

[sid7]

This works perfect! Thanks !