Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 962

Oct 24th, 2009

problem with text field and submit button

Expand Post »

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

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

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)

Similar Threads

text field values to php variable....... in PHP
problem with text field.. help in JSP
IE6 fires unexpectedly 'onclick' when pressing ENTER (keyCode 13) in JavaScript / DHTML / AJAX
Php submit button problem.. in PHP
Displaying multiple similar names in a listbox in Visual Basic 4 / 5 / 6

sid7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Oct 2009

Permalink

Oct 24th, 2009

Re: problem with text field and submit button

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:

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

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,527 posts
since Apr 2009

Permalink

Oct 24th, 2009

Re: problem with text field and submit button

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.

sid7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Oct 2009

Permalink

Oct 24th, 2009

Re: problem with text field and submit button

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

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,527 posts
since Apr 2009

Permalink

Oct 24th, 2009

Re: problem with text field and submit button

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

Thanks for your time though, appreciated.

Sid

sid7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Oct 2009

Permalink

Oct 24th, 2009

Re: problem with text field and submit button

Sid,

But of course, I'm being stupid.

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

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.

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,527 posts
since Apr 2009

Permalink

Oct 24th, 2009

Re: problem with text field and submit button

This works perfect! Thanks !

sid7

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Oct 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: dissapearing blanks in textbox

Next Thread in HTML and CSS Forum Timeline: Need for help

DaniWeb Message

Cancel Changes

User Name
Password