Html 占位符：绝对位置不使用负上限值

我有一个输入，它有一个占位符。我已经成功地设置了占位符的样式，但是当我试图将占位符移动到顶部时，当输入聚焦到它不工作时，我使用的是绝对位置，顶部位置为负值

这是我的代码外观：

<style>
    #wrapper {
      padding:40px;
      position:relative;
    }

    input {
      display:block;
      position : relative;
    }

    input::-webkit-input-placeholder {
      color: red;
      position:absolute;
    }

    input:focus::-webkit-input-placeholder {
      top:-20px;
      color:blue;
    }
</style>

<div id="wrapper">
  <input type="text" placeholder="Engkus Kusnadi">
</div>

#包装纸{
填充：40px；
位置：相对位置；
}
输入{
显示：块；
位置：相对位置；
}
输入：：-webkit输入占位符{
颜色：红色；
位置：绝对位置；
}
输入：焦点：：-webkit输入占位符{
顶部：-20px；
颜色：蓝色；
}

这是我的小提琴：

我错过了什么？

#包装器{
填充：40px；
位置：相对位置；
}
输入{
位置：相对位置；
}
输入：：-webkit输入占位符{
颜色：红色；
位置：绝对位置；
过渡：均为0.3秒；
}
输入：焦点：：-webkit输入占位符{
-ms变换：平移（0，-20px）；
-webkit转换：转换（0，-20px）；
转换：转换（0，-20px）；
颜色：蓝色；
}
输入：焦点：：-moz占位符{
-webkit转换：转换（0，-20px）；
转换：转换（0，-20px）；
颜色：绿色；
}

---

您不能在

：-webkit输入占位符中使用
顶部
底部

左侧

右侧

。您可以使用以下样式：

• 字体属性
• 颜色
• 背景属性
• 字距
• 字母间距
• 文字装饰 -垂直对齐 -文本转换 -线高 -文本缩进 -不透明

您可以使用

输入：焦点[占位符]

#包装器{
填充：40px；
位置：相对位置；
}
输入{
位置：相对位置；
}
输入：：-webkit输入占位符{
颜色：红色；
}
输入：焦点[占位符]{
顶部：-20px；
颜色：蓝色；
}

---

正如@3rdthemagic已经说过的那样，它不受支持。 我建议您尝试使用label、span或伪元素。有一些很好的例子。祝你好运；）

---

您可以使用行距向上移动文本，此代码将支持所有浏览器

#包装器{
填充：40px；
位置：相对位置；
}
输入{
位置：相对位置；
}
输入：：-webkit输入占位符{/*Chrome/Opera/Safari*/
颜色：红色；
位置：绝对；}
输入：：-moz占位符{/*Firefox19+*/
颜色：红色；
位置：绝对；}
输入：-ms输入占位符{/*IE 10+*/
颜色：红色；
位置：绝对；}
输入：-moz占位符{/*Firefox 18-*/
颜色：红色；
位置：绝对位置；
}
输入：焦点：：-webkit输入占位符{/*Chrome/Opera/Safari*/
线高：1px；
颜色：蓝色；
}
输入：焦点：：-moz占位符{/*Firefox19+*/
线高：1px；
颜色：蓝色；
}
输入：焦点：-ms输入占位符{/*IE 10+*/
线高：1px；
颜色：蓝色；
}
输入：焦点：-moz占位符{/*firefox18-*/
线高：1px；
颜色：蓝色；
}

---

您可以使用

标签

，它将在所有浏览器中工作

---

向上选通

添加了js以获得更好的行为

var-fields=$（'.js-field'）；
字段。每个（函数（）{
var input=$（this.find（'input'）；
变量占位符=$（this.find（'span'）；
input.on（'blur'，function（）{
$（this.val（）==“”
？占位符。显示（）
：占位符。隐藏（）；
});
input.on（'focus'，function（）{
占位符.show（）
});
});
标签{
显示：块；
宽度：200px；
位置：相对位置；
填充顶部：20px；
边缘顶部：20px；
}
输入{
高度：30px；
宽度：100%；
边框：1px纯黑；
填充物：5px；
框大小：边框框；
}
跨度{
位置：绝对位置；
显示：块；
顶部：20px；
左：5px；
颜色：红色；
字体系列：无衬线；
字体大小：14px；
线高：30px；
过渡：放松；
}
输入：焦点+广度{
转换：translateY（-100%）；
颜色：蓝色；
}

占位符1
占位符2
无法将位置设置为占位符，因为它不是块元素。可以使用标签而不是占位符。你可以随心所欲地为它们制作动画。只在Chrome中使用。哇，这是一个令人惊叹的代码，可以在Chrome上使用，如果你添加了过渡：所有0.3；非常感谢动画效果！！占位符从定义上来说只有在其他东西出现之前才存在嗯，你必须按照Karlisup所说的去做，javascript将是我的目标，但是有一种标签技巧，当相应的输入被聚焦时，标签会发生变化，当我发现它时，如果你仍然被卡住，它会回来：）漂亮的例子，但要求实现额外的标记/style/js。输入更改位置，而不是占位符。由于文本位于文本框内，因此当文本向上移动时，您无法看到它（完全），而我正在键入和输入时，文本处于隐藏状态，当输入失去焦点时，文本现在是可见的。但是当输入失去焦点时，跨度消失了。我认为你理解了这个想法，可以从给定的答案中选择一个。