在文本字段 HTML 内对齐占位符

Posted 2023-03-05

【中文标题】在文本字段 HTML 内对齐占位符

【英文标题】：Align placeholder inside text field HTML

【发布时间】：2016-04-27 23:01:40

【问题描述】：

我想在左上角移动占位符。

我想要图片上的东西。

我试过了

::-webkit-input-placeholder 
    left: 0px;
    up: 0px;

但它不起作用。我很了解 html，但我从来没有做过这样的事情。

【参考方案1】：

我自己找到了答案！ :D

所以，我只是将<input> 更改为<textarea>。使用一点 CSS，它看起来与输入字段完全一样。

非常感谢所有试图帮助我的人！

【参考方案2】：

我认为 css 定位可以提供帮助。位置相对或绝对。根据您的容器，尝试提供一种位置样式。

编辑：或者您可以使用背景图像而不是占位符。并且您可以使用 javascript 删除鼠标悬停时的背景图像。

【参考方案3】：

不幸的是，您只能对placeholder 伪元素应用哪些样式。

Article

这些是：

颜色 字体大小/字体样式/字体粗细 字母间距 行高 填充 文本对齐 文字装饰

位置不是其中之一。

【讨论】：

不使用占位符伪元素。您可以尝试使用定位标签。

【参考方案4】：

您只能使用text-align: center|left|right 更改输入的值/占位符的对齐。

来源： https://developer.mozilla.org/de/docs/Web/CSS/text-align

否则你可以使用padding: 0 0 0 0; 强制空格

来源：https://developer.mozilla.org/de/docs/Web/CSS/padding

信息：up 不是有效的 css。正确的名字是top 如果你想使用位置属性，例如：right, left, bottom 或 top，你必须设置 position: absolute|fixed;

编辑：正如这里所说：https://***.com/a/5677243/3119231 可以通过line-height 属性设置"top" 值

【讨论】：

我们是在谈论文本区域还是输入？

我想对齐输入中的占位符（文本）。

这不可能。您可以对齐它只是左，居中或右。但有趣的问题！