开发者

vertical padding for input elements in webkit browsers has no effect

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜