如何创建永久占位符？CSS/HTML

我正在为我的第一份官方开发工作制作一个web表单

我目前正在尝试这样做，以便我的输入字段占位符不会消失，但我需要它们缩小并移动到输入字段的顶部。 我能够找到一些代码，这些代码应该能够完成工作，但却不能。 有谁能指导我如何做这件事吗

我找到的代码：

我已经花了好几个小时来做这件事，尝试了各种各样的变化，但运气不好

.wrapper /*wpcf7*/{
    position:relative;
}

input {
  font-size: 14px;
  height: 40px;

}

.placeholder{
  position:absolute;
  font-size: 25px;
  pointer-events:none;
  left: 1px;
  top: 1px;
  transition: 0.1s ease all;
}

input:focus ~ .placeholder{
  top: 1px;
  font-size: 11px;
}

联系人表格7中的HTML：

<label> First Name:
[text first-name placeholder "First Name"] </label>


<label> Last Name:
    [text* last-name placeholder "Last Name"] </label>


<label> Your Email:
    [email* your-email placeholder "Example@Example.com"] </label>

名字：
[文本名字占位符“名字”]
姓氏：
[文本*姓氏占位符“姓氏”]
您的电子邮件：
[电子邮件*您的电子邮件占位符”Example@Example.com"] 

当前，“我的字段”上的占位符在聚焦时不会移动，但删除“~.placeholder”会使字段在聚焦时收缩

我试图让字段执行的操作示例：

input:focus~.lastname\u浮动标签，
输入：focus~.firstname\u浮动标签，
输入：非（：焦点）：有效~.firstname\u浮动标签，
输入：非（：焦点）：有效~.lastname\u浮动标签{
顶部：2个；
左：2px；
底部：2px；
字体大小：11px；
不透明度：1；
}
.inputText{
字体大小：14px；
宽度：200px；
高度：35px；
}
.firstname\u floating-label、.lastname\u floating-label{
位置：绝对位置；
指针事件：无；
左：10px；
顶部：10px；
过渡：0.2s缓解所有；
}
div{position:relative；}

名字
姓氏

首先要编辑占位符，需要使用的选择器是：占位符。您试图重新创建的效果实际上只是一个浮动表单标签的技巧，而不是占位符文本。这里有一个详细的解释：

如果仔细看，JSFIDLE示例实际上并没有使用占位符，而是使用了一个带有.placeholder类的span标记

您自己的代码具有输入占位符属性，您可以将其作为目标并输入：焦点，如下所示：

input::-webkit-input-placeholder {
    color: #999;
    font-size: 15px;

}
input:focus::-webkit-input-placeholder {
    color: red;
    font-size: 5px;
}
/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
    font-size: 5px;
}
/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
    font-size: 5px;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
    font-size: 5px;
}

input:：-webkit输入占位符{
颜色：#999；
字体大小：15px；
}
输入：焦点：：-webkit输入占位符{
颜色：红色；
字号：5px；
}
/*Firefox<19*/
输入：-moz占位符{
颜色：#999；
}
输入：焦点：-moz占位符{
颜色：红色；
字号：5px；
}
/*Firefox>19*/
输入：：-moz占位符{
颜色：#999；
}
输入：焦点：：-moz占位符{
颜色：红色；
字号：5px；
}
/*Internet Explorer 10*/
输入：-ms输入占位符{
颜色：#999；
}
输入：焦点：-ms输入占位符{
颜色：红色；
字号：5px；
}

这将使占位符文本在输入焦点上变小。

阅读后更新了用户的答案

我在输入中添加了一些填充，并将“占位符”内容移动到输入中（将

top

值从

-12px

更改为

2px

，并添加一个

左：2px

）。我还添加了

margin top

属性，以使过渡平滑，并且不会干扰页面上的其余内容

现在，占位符内容位于输入框内，就像您共享的屏幕截图一样

.wrapper{
位置：相对位置；
}
输入{
字体大小：14px；
高度：40px；
过渡：填充顶部0.1s，边距顶部0.1s；
边缘顶部：15px；
}
.占位符{
位置：绝对位置；
字体大小：25px；
指针事件：无；
左：3px；
顶部：18px；
过渡：0.1s缓解所有；
}
输入：focus~。占位符{
顶部：2个；
左：2px；
字体大小：11px；
}
输入：焦点{
页边顶部：1px；
填充顶部：15px；
过渡：填充顶部0.1s，边距顶部0.1s；
}

占位符
一些内容。

很抱歉，这有点让人困惑，但这里有一个我应该在原始帖子中发布的示例：正如您所看到的，占位符位于带有复选标记的图像字段的上角。这就是我需要移动占位符的地方，一旦字段被聚焦，我发布的代码应该做什么，但由于某种原因，我无法让它与我的输入字段（名字、姓氏、电子邮件等）一起工作。您的问题似乎是您不知道如何将占位符移动到输入的顶部。好的，那么你的意思是根据你的数据和png来构建完整的表单。是吗？我可以用另一种方法来完成这项工作。这就是我要找的：很抱歉搞混了，原来我真正要找的是所谓的“浮动标签”。我不知道这个词，所以我发现用我有限的解释能力很难找到答案。哈哈。好的，根据你的要求进行了更改。o不使用span，通过for属性将标签与你的输入关联起来：，其余的是操作系统风格。哇，这里的知识量是惊人的！非常感谢你！现在我有多种风格略有不同的方式。我最终重新格式化了我的HTML，并让它开始工作。我的成功：再次感谢你。。。真是太棒了@JackJones要添加到这一点上，您还可以在输入上使用

必需的

，然后使用

：valid

，这样当输入中有文本且您单击外部时，标签将保持在顶部。请看：@elveti非常感谢！把它摆弄了一下，才明白你的意思。这是一个非常有用的功能！