Form Text Input with an image as submit button (input type="image"), and the button is misaligned

Question

HTML:

<form action="search.php" method="GET">
    <input type="text" name="q" value="Search for an item..." width="150" style="border: solid 1px black; padding: 3px;" />
    <input type="image" src="images/search_icon.png" style="width: 24px; height="30px;" /> 
</form>

What I get:

enter image description here

by the way, if I try use padding on just the button, it moves the whole form down.

You have an extra " in the middle of your style attribute. — Aaron
– Aaron, Commented Apr 20, 2012 at 16:07
oh yeah, changed it but the buttons still in the same place. — user1266702
– user1266702, Commented Apr 20, 2012 at 16:17
set a height attribute inside the styling of your input box. — hjpotter92
– hjpotter92, Commented Apr 20, 2012 at 16:27

j08691 · Accepted Answer · 2012-04-20 16:24:17Z

1

Try setting the vertical-align property on the input to middle.

input {
    vertical-align: middle;
}

jsFiddle example.

answered Apr 20, 2012 at 16:24

j08691

209k33 gold badges269 silver badges281 bronze badges

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

3 Comments

j08691 Over a year ago

What's the link to your image?

j08691 Over a year ago

Since your magnifying glass image has some extra white space on it, you'll need to position it and then adjust. See jsfiddle.net/j08691/wMYX4/2

Nate Symer Over a year ago

This worked. Make sure that the elements' positions are relative

Collectives™ on Stack Overflow

Form Text Input with an image as submit button (input type="image"), and the button is misaligned

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related