HTML and CSS

problem with text field and submit button

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2009

Posts: 4

Reputation: sid7 is an unknown quantity at this point

Solved Threads: 0

sid7

Offline

Newbie Poster

problem with text field and submit button

Oct 24th, 2009

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

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
input
{
padding: 4px; 
color:#888888; 
border: 1px solid #B4CFEC;
}
input
{
padding: 4px; 
color:#888888; 
border: 1px solid #B4CFEC;
}

// my html

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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

Last edited by peter_budo; Oct 25th, 2009 at 4:43 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 24th, 2009

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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#submitButton {
    border-width : 0;
}

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

Airshow

50% of the solution lies in accurately describing the problem!

•

Join Date: Oct 2009

Posts: 4

Reputation: sid7 is an unknown quantity at this point

Solved Threads: 0

sid7

Offline

Newbie Poster

Oct 24th, 2009

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.

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 24th, 2009

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

50% of the solution lies in accurately describing the problem!

•

Join Date: Oct 2009

Posts: 4

Reputation: sid7 is an unknown quantity at this point

Solved Threads: 0

sid7

Offline

Newbie Poster

Oct 24th, 2009

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

Thanks for your time though, appreciated.

Sid

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 24th, 2009

Sid,

But of course, I'm being stupid.

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

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<input type="button" name="login" value="Login" onclick="this.form.submit();" />
<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

Last edited by Airshow; Oct 24th, 2009 at 8:28 pm.

50% of the solution lies in accurately describing the problem!