drop shadow on form input textfield

works fine, but needs cleaning up :)

[benihana]

Hi
I have a textfield input that i have added a drop shadow to.

basically i have a 200px x 100px gif that is totally white except for a dropshadow just inside the right hand and bottom edges. this is added as a background to a container div.

the html looks like this:

<form action="blah">
<div id="wrapper">
<input name="textfield" type="text" id="textfield" value="search">
</div>
...
</form>

and the css:

input#textfield {
padding:2px;
padding-top:3px;
padding-bottom:1px;
border:0px;
border:1px solid #006699;
font-size:90%;
background-color:#ffffff;
width:164px;
margin-top:0px;
}

#wrapper {
border:0px;
background-image:url(../graphics/search.gif);
background-position:bottom right;
width:165px;
padding:0px 3px 2px 0px;
margin-top:2px;
}

this works fine, but id like the submit button to be next to
it instead of underneath. (display:inline;)

adding display:inline to the input doesnt work, as its wrapped in the div. adding it to the div works, but leaves an extra 3-4px margin at the right end of the input, and ruins the effect. i have tried reducing the margins but still cannot get it just right.

any suggestions? i currently have it in a two cell table which works fine, but would like cleaner code.

thanks

[SuzyUK]

have you tried floating input#textfield left.. with a right margin to control any spacing required between that and the submit input?

Suzy

[benihana]

thanks suzy!

i floated the #wrapper left and it works like a dream.
cheers!