With input element placeholder text is middle with default CSS

HTML-CSS
1

And with textarea placeholder is on top. I want same for input element placeholder to be on top? What I do bad?

There is default stylesheet and do same like on live page:

https://jsfiddle.net/xspm1zdu/



Thanks! :stuck_out_tongue:

2

The text input is aligned at the “top”, because there isn’t really a top or bottom: a text input is a single line of text, and all you’ve done is add absolutely enormous amounts of space around that single line. If really want the line of text at the top, add padding in at the bottom of the input. You’ll have a huge empty space that will never be used, but it’ll do what you want I guess. I’d advise not having text inputs with massive heights – textareas are fine, they are designed for blocks of text, normal inputs are definitely not, all you’re doing is making the interface feel weird to use and a bit broken.

input {
  font-family: monospace; /* Make font the same as for the textarea */
  font-size: 16px;
  line-height: 1.2; /* 1.2 times 16 is 19.2, round it to 20 */
  padding-bottom: 180px; /* 200 - 20 is 180 */
}

textarea {
  vertical-align: top;
  line-height: 1.2;
  font-size: 16px;
  height: 200px;
}

input

1 Like
3

Yes here is the key about the padding-bottom. I try without it and test all the way but is needed now understand! Thank you for explain.

4

This for not need height is same for select element?