| October 05, 2010 - How to vertically align text within input type="text" with background |
|
|
|
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="" />
|
|
|
Associated tags:
HTML, CSS, Vertically Align, Input Type="text", Background |
|
|
| Comments: |
| bet365 italia wrote on October 13, 2010 at 22:30 |
| hi!This was a really terrific Topics! I come from itlay, I was fortunate to seek your blog in digg Also I learn much in your topic really thank your very much i will come every day |
|
|
| Surge wrote on October 19, 2010 at 11:35 |
| Great post, thanks for the help! |
|
|
| Kris wrote on October 23, 2010 at 15:21 |
| last week our class held a similar talk on this subject and you point out something we haven`t covered yet, thanks. - Kris |
|
|
| Cloon wrote on November 27, 2010 at 17:51 |
| This css doesn´t work in mozilla firefox. In IE 8 and Chrome it works fine |
|
|
| Michael P wrote on December 7, 2010 at 16:21 |
| What version of firefox are you using? I will place a link to the site where we used it, and it works fine in FF. |
|
|
| Iren wrote on December 8, 2010 at 01:04 |
| HI..Thanks for your blog post.i found your blog, its really good.I particularly like the section .your bolg is very much informative.......... Thanks for the nice post. |
|
|
| Joe wrote on May 14, 2011 at 00:32 |
| Excellent solution! I have smaller font-size in the input text field and IE did not render the text`s v-align properly. With line-height added to the input text field, vertical-align worked like charm! Thx so much! |
|
|
| Back wrote on August 15, 2011 at 12:25 |
| Thought I would comment and say neat theme, did you make it for yourself? It`s really awesome! |
|
|
|
|
|
|
