converting search query box to css box -- if possible

Is it possible to use a css border box for a search query box? The current one I have is established with size="31." This method is unpredictable, as the length of "31" is different in different browsers.

If I could establish a box in css in which to type a query, it may not change like the size "31" box -- in theory.

Here's my CSS to add the magnifying glass image:
.searchBox{
background-image:url('. . . /index_files/tmg.gif');
background-repeat:no-repeat;
padding-left:20px;
}

Here's my HTML:
<form style="MARGIN: 0px" method="get" action="http://www.picosearch.com/cgi-bin/ts.pl">
<input name="index" value=" . . . 0 . . . " type="hidden"/> <input class="searchBox" onfocus="if (this.defaultValue==this.value) this.value='';" name="query" value="Search" size="31"/></form>

Is it possible to use a css border box for a query box?

Any insight would be appreciated. Thanks.

Just add these to the css for .searchBox
width: 200px; /* or whatever you like */
/* add a height if you need */
border: 1px solid blue; /* there are many other border properties you can use */
but don't forget to remove size="31".

Andy,

Good grief, how do you know how to do all of this? It worked, just like you said!

Thank you a ton!