提问人：Elif Mutlu 提问时间：9/15/2023 最后编辑：ralph.mElif Mutlu 更新时间：9/15/2023 访问量：79
如何将输入字段中的占位符与左上角对齐？
How can I align the placeholder in the input field to the top left?
问：
我想将我的占位符对齐到左上角，但无论我怎么尝试，我都做不到。不幸的是，其他来源也没有帮助我。
这个问题有一个答案，但我找不到不使用 .<div>
使用的 Flexbox。
<div class="inputs">
<input class="name" name="name" type="text" placeholder="Name">
<input class="mail" name="mail" type="text" placeholder="E-mail">
<input class="message" name="message" type="text" placeholder="Please enter your message">
</div>
这是我的css代码。我试图将占位符保留在左上角。
input[type=message]::placeholder {
left: 0px;
top: 0;
font-size: 20px;
vertical-align: 0;
}
答：
-1赞
hasti kukadiya
9/15/2023
#1
使用 .您不必在 textArea 元素的左上角设置占位符。
评论
0赞
tacoshy
9/15/2023
拼写错误引起的问题不应得到回答，而应作为 .缺少声誉不是滥用答案选项来绕过帐户限制的借口。除此之外，该问题不是由错别字引起的。即使修复拼写错误也无法修复任何问题，因为由于多种原因（替换元素就是其中之一），代码无法以这种方式工作。Not reproducible or caused by Typos
0赞
hasti kukadiya
9/15/2023
谢谢。为了正确的我。我真的不知道
-1赞
Marko Ristic
9/15/2023
#2
当输入具有指定的高度时，以下代码应该起作用：
HTML格式：
<input class="name" name="name" type="text" placeholder="Name">
<input class="mail" name="mail" type="text" placeholder="E-mail">
<input class="message" name="message" type="text" placeholder="Please enter your message">
CSS格式：
input {
height: 50px;
}
input::-webkit-input-placeholder {
position:absolute;
left: 0px;
top: 0px;
font-size: 20px;
}
0赞
Jae
9/15/2023
#3
从技术上讲，您不能像尝试的那样使用顶部、右侧、底部和左侧属性来定位伪元素。占位符的左上角绝对是不可能的（也许我错了），但如果你想将占位符向左、居中或向右对齐，你总是可以使用文本对齐。
<!--HTML-->
<input class="name" name="name" type="text" placeholder="Name">
/*css*/
input::-webkit-input-placeholder {
text-align: center;
}
我假设您想要一个大的输入字段，文本位于左上角。如果是这样，则您要查找的元素不是该元素，而是文本区域元素。这将生成一个大的文本字段，并且您不必放置占位符。默认情况下，它位于左上角。若要将占位符移动到中心或右侧，只需使用 text align 属性即可。<input><textarea></textarea>
希望这有帮助！ 祝你好运！
评论