如何在不使用div的情况下将输入框的placeholder对齐至左上角？

问题分析 #

你之前的代码存在两个核心问题：

1. 选择器错误：input[type=message]不匹配你的HTML结构（目标输入框是class="message"且type="text"），导致样式根本未生效。
2. 单行Input的局限性：如果是多行输入场景，<input type="text">是单行控件，无法实现多行内容的左上角对齐，必须用<textarea>替代。

修正后的代码 #

HTML（替换多行输入的input为textarea）

<div class="inputs">
     <input class="name" name="name" type="text" placeholder="Name">
     <input class="mail" name="mail" type="text" placeholder="E-mail">
     <textarea class="message" name="message" placeholder="Please enter your message"></textarea>
</div>

CSS（实现Placeholder左上角对齐，无需额外div）

/* 基础样式：统一输入框盒模型，确保对齐逻辑生效 */
.inputs input, .inputs textarea {
  box-sizing: border-box;
  width: 100%; /* 可选，根据布局需求调整宽度 */
  padding: 0; /* 去掉内边距，让placeholder紧贴左上角 */
  vertical-align: top; /* 强制内容垂直顶对齐 */
}

/* 针对message输入框的Placeholder样式 */
.message::placeholder {
  font-size: 20px;
  text-align: left;
  vertical-align: top;
  line-height: 1; /* 配合字体大小调整行高，确保精准顶对齐 */
}

关键说明 #

• 无需额外<div>：仅通过调整输入框自身的CSS属性即可实现效果，完全符合你的需求。
• 若要给单行输入框（如name/mail）设置相同效果，直接复用上述CSS逻辑即可，无需额外修改。
• left/top属性对::placeholder无效，因为它不属于定位元素，必须通过text-align、vertical-align和padding来控制位置。

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