Changing the vertical alignment of text in an INPUT box using CSS2

[Amnesia]

I have a heavily styled input box which has a different font size and style and different border, background and text colours. It has the height and width properties set to fit the graphical style of the page, and because of the font size not fitting the height of the input box - it's just kind of floating aimlessly between the middle and the top of the box. Does anyone know the CSS property to set the vertical alignment of text in textboxes???

e.g.

(<INPUT TYPE=&quot;text&quot; STYLE=&quot;position: absolute; top: 78px; left: 52px; height: 21px; width: 190px; z-index:4; border-right: 2px solid #ED0000; border-left: 1px solid #ED0000; border-top: 2px solid #ED0000; border-bottom: 1px solid #F46000; background-color: #FF9933; font-family: Arial, Helvetica, sans-serif; font-size: 07pt;&quot;>)

 

[Boomerang]

Hi Amnesia,

If you change the line-height you can change the distance between (text)lines. Because you only have one (text)line in a textbox you can change the vertical position of the text with it.

So add &quot;line-height:14px;&quot; to your style.

Change the line-height between 0px and 25px and see the differences.

If you define this line-height in textarea's maybe you don't want that distance between the lines.

<INPUT TYPE=&quot;text&quot; STYLE=&quot;line-height:14px; position: absolute; top: 78px; left: 52px; height: 21px; width: 190px; z-index:4; border-right: 2px solid #ED0000; border-left: 1px solid #ED0000; border-top: 2px solid #ED0000; border-bottom: 1px solid #F46000; background-color: #FF9933; font-family: Arial, Helvetica, sans-serif; font-size: 07pt;&quot;>

Hope this helps,
Erik