Member Avatar for 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

Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
  • 2 Contributors
  • 6 Replies
  • 118 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by sid7
Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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

Member Avatar for sid7

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

Thanks for your time though, appreciated.

Sid

Member Avatar for 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

Edited by Airshow because: n/a
Member Avatar for sid7

This works perfect! Thanks !

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.