Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute.
The issue lies in the fact that while the input text is vertically centered, the placeholder text is not. This inconsistency needs to be addressed.
To resolve this, I am seeking a way to vertically center the placeholder text similar to how the input text is centered.
This is an example of the HTML structure:
<div class="tb">
<div class="placeholder">username</div>
<input type="text" name="tb-username" />
</div>
Here is the CSS style applied:
.tb{
position: relative;
height: 28px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
.tb input, .tb .placeholder{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height: 28px;
}
This setup has been tested using the latest Chrome version on Mac OS X.
Thank you for taking the time to assist with this matter.