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

Question

我正在为第一份正式开发工作使用网络表单。

我目前正在尝试使输入字段的占位符不会消失，而是需要它们缩小​​并移至输入字段的顶部。 我能够找到一些应该完成工作的代码，但事实并非如此。 谁能指导我如何进行这项工作？

我找到的代码：https://jsfiddle.net/p19j2nm5/

我已经花了好几个小时尝试各种变化，但没有运气。

.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>

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

我试图让我的领域做事的例子：

Answer 1

input:focus ~ .lastname_floating-label,
input:focus ~ .firstname_floating-label,
input:not(:focus):valid ~ .firstname_floating-label,
input:not(:focus):valid ~ .lastname_floating-label{
  top: 2px;
  left: 2px;
  bottom: 2px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.firstname_floating-label, .lastname_floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: 0.2s ease all;
}
div{position:relative;}

<div>
  <input type="text" class="inputText" required/>
  <span class="firstname_floating-label">Firstname</span>
</div>
<div>
  <input type="text" class="inputText" required/>
  <span class="lastname_floating-label">Lastname</span>
</div>

好的，我根据您的要求进行了更改。 其他例子是错误的。尝试添加更多输入，您可以检查占位符将位于第一个输入中。而且，如果您集中精力，占位符将覆盖键入的值。

仅使用HTML和CSS可以检查此示例。

Answer 2

首先要编辑占位符，您需要使用的选择器是：placeholder。您尝试重新创建的效果实际上只是浮动表单标签而不是占位符文本的一个技巧。这里有详尽的解释：https://css-tricks.com/float-labels-css/

Answer 3

如果仔细观察，jsfiddle示例实际上不是使用占位符，而是使用带有.placeholder类的span标签

您自己的代码具有输入占位符属性，您可以将其定位并输入：focus，像这样：

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;
}

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

Answer 4

阅读Daebak Do后更新了your comment的答案。

我在输入中添加了一些填充，并在输入中移动了“占位符”内容（将top的值从-12px更改为2px，并添加了left: 2px） 。我还添加了margin-top属性，以使过渡平滑，并且不会干扰页面上的其余内容。

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

.wrapper{
  position: relative;
}

input {
  font-size: 14px;
  height: 40px;
  transition: padding-top 0.1s, margin-top 0.1s;
  margin-top: 15px;
}

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

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

input:focus{
  margin-top: 1px;
  padding-top: 15px;
  transition: padding-top 0.1s, margin-top 0.1s;
}

<div class="wrapper">
  <input type="text">
  <span class="placeholder">Placeholder</span>
</div>

<p>Some content.</p>