我正在为我的第一份官方发展工作制作一个网络表格。
我目前正试图使它,使我的输入字段占位符不消失,但我需要他们缩小和移动到输入字段的顶部。
我能找到一些代码,应该完成的工作,但不是。
有人能指导我怎么做吗?
我找到的代码: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”会使字段在聚焦时收缩。
我想让我的领域去做的例子:html - 如何创建永久占位符? CSS/HTML-LMLPHP

最佳答案

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就可以检查这个例子。

10-05 20:40
查看更多