如何让文本在input文本输入框中实现左上对齐效果？

<input> 属于单行文本输入控件，默认文本会垂直居中显示，仅可调整水平对齐方向。如果需要实现输入文本在左上角对齐的效果，需替换为多行文本域 <textarea> 控件，具体修改方案如下：

方案一：仅调整输入框内文本水平左对齐，保留单行输入样式 #

给.mailbox补充文本左对齐规则，避免继承父元素的全局居中属性：

.mailbox,
.enterPassword {
  /* 原有属性全部保留，新增以下规则 */
  text-align: left;
}

如果需要同步调整输入框上方的标签左对齐，再修改.emailSection的CSS规则：

.emailSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
}

方案二：实现输入框内文本左上角对齐 #

先修改HTML代码，将单行输入框替换为多行文本域：

<div class="emailcontainer">
  <div class="emailSection">
    <label for="email" class="maillabel">Your E-Mail Address:</label>
    <textarea name="email" placeholder="mail@website.com" class="mailbox"></textarea>
  </div>
</div>

再修改对应的CSS规则：

.emailSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
}
.mailbox,
.enterPassword {
  width: 582px;
  min-height: 44px;
  border: 2px solid rgba(142, 142, 142, .5);
  border-radius: 22px;
  padding: 10px 25px;
  text-align: left;
  resize: none; /* 可选：禁止用户手动拖拽调整输入框大小 */
}

内容的提问来源于stack exchange，提问作者Psuedo