CSS input styles

Question

I have this input text and an input button...I am looking to have them attach

you can see an example of this at http://www.taranmarlowjewelry.com/ at the top right corner,

as you can see there is a space between the input text and the input button....how do I get

them to attach?

<form class="product_search" method="GET" action="<?php echo $pp_url?>/" >
<input name="product_search" id="wpsc_search_autocomplete" class="wpsc_product_search wpsc_live_search_embed .wpsc_live_search" autocomplete="off" />
<input type="submit" id="button" name="button" class="searchBtn" value="GO"/>
</form>

Any help would be greatly appreciated and thanks for your time :)

• J

Also how do I get the height of the button to be the same height as the input text?

Answer 1

try the following:

input[type=submit]
{
    margin-left:-6px;
}​

also, see this in a fiddle:

http://jsfiddle.net/Msq7y/

Answer 2

Apply this to your form:

.product_search{
   font-size:0px;
}

or put input elements in same line one after other:

<input name="product_search" .... /><input type="submit" ...

Answer 3

Try the following:

.searchBtn{
 padding-left:0px;
}