Check out this jsfiddle: http://jsfiddle.net/2GpmW/
When setting the CSS for the form elements, the following styles were applied:
.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
border: none;
color: #525252;
height: 30px;
line-height: 15px;
margin-bottom: 10px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 2px 0px 2px 5px;
width: 400px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #DFDFDF;
font-family: inherit;
font-size: inherit;
}
However, there seems to be an issue where the label next to the text area appears lower and the placeholder inside the text area is not vertically centered like in the input text field.
Could anyone shed light on why this is happening and provide a solution?
Thank you!