How to align a text within an "input" HTML text

Question

How do you align a text within the "text area" of a text input using CSS? I’ve tried text-align but it doesn’t work well, the text is aligned on the left but not at the top. Is there any way to manually align?

input code I’m talking about

 <input id="menssagemBox" type="text" name="msg" placeholder="teste" class="msgbox">

Answer 1

You have to "match" with padding-bottom, and not with height.

OBS: I just don’t know why you want one input with this layout, it doesn’t make sense since it can’t have more than one line...

#emailBox {
    padding-bottom: 100px;
    padding-top: 10px;
    box-sizing: border-box
}
#emailBox {
    height: 100px;
    box-sizing: border-box
}
body {
  display:flex;
}

<input id="emailBox" type="email" name="email" placeholder="padding-bottom: 100px;" class="emailBoxClass" />
<input id="emailBox2" type="email" name="email" placeholder="height: 100px;" class="emailBoxClass" />

TIP

Now if you want an "input" that can have more than one line of text, then you have to use the <textarea></textarea> how different from the input normal has closing tag and other global attributes that you can refer to here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

The <textarea> you can control the height with the attribute row, which will determine how many rows of text line it will have before the scroll, or with height even if you prefer.

#emailBox {
    height: 100px;
    box-sizing: border-box
}

<textarea id="emailBox" type="email" name="email" placeholder="height: 100px;" class="emailBoxClass"></textarea>

<textarea id="emailBox2" rows="5" type="email" name="email" placeholder="rows=5" class="emailBoxClass"></textarea>