How to vertically align text within input type="text" with background

October 05, 2010
Padding and margin will not work in this situation, because of the background, vertical-align:middle; does not work as well. But there is one simple solution to set line-height to height of the text box.

 This solution will work in IE, FireFox and Google Crome.

 

<style>
.textBox{
   font-family:Arial, Helvetica, sans-serif;
   font-size:13px;
   color:#999;
   background-image:url(/img/textBoxBG.jpg);
   background-repeat:repeat-x;
   width:156px;
   height:24px; 
   border:0;
   margin:0;
   vertical-align:middle;
   line-height:24px;
}
</style>
<input type="text" class="textBox" name="textBox1" id="textBox1" value="" />