I am unable to set a vertical/top padding for the text/placeholder in input elements.
The following code will work in IE/Firefox/Opera, but not in Safari/Chrome:
CSS:
input
{
border: 1px solid black;
height: 100px;
padding: 70px 25px 10px 25px;
width: 300px;
}
HTML:
<input type="text" placeholder="Enter text here"/>
The webkit Developer Tools display the metrics as they should be, but the text is still in the middle of the input.
Something similar开发者_C百科 might be here (unanswered though).
Just tested that and its bizzare how Chrome behaves. Could you maybe stick the input in a div and use padding on that?
inputs are inline elements. Inline elements don't accept vertical padding.
add: display:block
to your CSS, you will then have to add float:left
and clear your floats afterwards.
I believe there is no way to set vertical padding in Webkit.
Use the height
property, to add vertical padding. You may need to use line-height
or padding-top
/padding-bottom
to vertically center the text across browsers.
精彩评论