Simple button-border query

[VatsaL]

Hello all,

I am using a simple textbox with a customised button, much like a search engine text input.

However, when I focus the cursor in the textbox, the customised submit button develops a dark black border, which I couldn't remove after hours of CSS.

It goes something like this:

http://www.b3ta.cr3ation.co.uk/data/gif/button-border.gif

At the time of printscreen, the CSS styling for the text feild was:

.search{
border-left:1px solid #AAAAAA; border-right:1px solid #AAAAAA; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; background-image:url('magnifying-glass.gif');
background-repeat:no-repeat;
background-position: left center;
padding-left:20px;
padding-top:2px;
height:17px;width:323px
}

and the styling for the button was:

.submit { cursor:pointer; margin-top:0px; border: 1px #AAAAAA; border-left: 0px; background:#FFFFFF; font-size:.9em; color:#666; font-weight:none; padding:0px; background:url(submit.gif) repeat-x left top; padding:0px; }

Is that any way by editing the CSS to stop the black border appearing so that the submit button looks exactly as it was when it was not focused?

thanks


VatsaL