我正在为我的第一份正式开发工作制作网络表单。
我目前正在努力使我的输入字段占位符不会消失,而是我需要它们缩小并移动到输入字段的顶部。 我能够找到一些应该完成工作但没有完成的代码。 谁能指导我如何完成这项工作?
我找到的代码: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”确实会使字段在聚焦时缩小。
最佳答案
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。
关于html - 如何创建永久占位符? CSS/HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57285703/