Html 水平对齐输入字段中的占位符 什么是将占位符对齐到字段顶部的正确方法，而输入文本通常出现在中间？

有没有办法只使用输入上的CSS/：：占位符来实现这一点，或者我应该构建一个带有span的包装器，当它处于活动状态时，span将消失，并且在它下面的输入字段将消失

这是我现在得到的一把小提琴：

这就是它在客户看来应该是什么样子：

---

这里的输入掩码不是这样的，我只与占位符对齐到顶部，而输入应该正常出现在中间。填充输入后，占位符必须消失。

我不认为直接将占位符伪类：：占位符作为目标可以做到这一点

只能将CSS属性的一小部分应用于此元素，位置不是其中之一：

---

我认为您将需要采用带有span和input以及position的包装方法。

您可以使用类似的方法，唯一的问题是input必须具有必需的属性

* { 框大小：边框框； } .输入{ 显示器：flex； 柔性流动：柱反向流动； 边框：1px纯色灰色； 宽度：220px； } .输入：有效+标签{ 不透明度：0； } .输入{ 宽度：100%； 填充：10px； 边界：无； } 用户名

---

我希望我实现了你所需要的

顺便说一句，我使用jquery在键入时隐藏占位符，如果字段为空，则再次显示占位符

$'.form控件'.keyupfunction{ var val=$this.val； ifval=={ $'.placeholder'.show； }否则{ $'.placeholder'.hide； } }; .输入控制{ 位置：相对位置； } .表格管制{ 边框：1px实心DDD； 边界半径：5px； 高度：40px； 左侧填充：8px； } .占位符{ 位置：绝对位置； 顶部：5px； 左：8px； 颜色：3dc185； 字体大小：12px； 文本转换：大写； } 伊米ę 您可以在占位符上使用translateY-100%向上移动文本，然后在文本框顶部添加一些填充以显示文本：

.占位符偏移量{ 字体大小：20px； 填充顶部：25px； } .占位符偏移量：：占位符{ 颜色：红色； 转化：translateY-100%； }

---

为了澄清-您希望在字段中输入文本时保留占位符文本吗？@Paddy No，占位符必须消失，但它应该位于字段顶部，而不像通常显示为对齐的输入文本。您能提供一个例子吗？那肯定不是占位符文本吗？我想你在找这个..@SanjeevS是的，我想根据答案，不可能让占位符看起来像这样，所以我会尝试用css/js代替span/label这就是我想的tbh，只是想确保没有解决办法…：谢谢！