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?

Engineer · Accepted Answer · 2012-07-04 17:33:23Z

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" ...

answered Jul 4, 2012 at 17:33

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user979331 Over a year ago

my next question is....if u look at it on the top right at taranmarlowjewelry.com how do i get the button and the input text in the same height?

Zoltan Toth Over a year ago

+1 @user1193385 You have declared decimal pixel height for your .searchBtn - that doesn't make sense since 1px is the smallest screen unit

Engineer Over a year ago

@user1193385 For 'next question', it would be better to create new question in SO :)

Mike Silvis · Accepted Answer · 2012-07-04 17:31:05Z

0

Try the following:

.searchBtn{
 padding-left:0px;
}

answered Jul 4, 2012 at 17:31

Mike Silvis

1,3092 gold badges17 silver badges31 bronze badges

1 Comment

Zoltan Toth Over a year ago

padding is the inner distance between the content and the element borders, so it won't affect anything outside it

starbeamrainbowlabs · Accepted Answer · 2012-07-04 17:35:00Z

0

try the following:

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

also, see this in a fiddle:

http://jsfiddle.net/Msq7y/

answered Jul 4, 2012 at 17:35

starbeamrainbowlabs

6,22810 gold badges49 silver badges79 bronze badges

Collectives™ on Stack Overflow

CSS input styles

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related