.nb-hm-contact-left {
padding-right: 20px;
}
.nb-hm-contact-grid {
position: relative;
margin-bottom: 30px;
}
form {
margin-bottom: 60px;
}
input,
textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 2px solid #f8f8f8;
color: #000000;
transition: all 0.3s;
}
&:focus+.nb-label-text,
&:valid+.nb-label-text {
font-size: 12px;
color: #282828;
bottom: 40px;
}
.nb-label-text {
font-size: 16px;
cursor: text;
position: absolute;
bottom: 10px;
left: 0;
transition: all 0.3s;
}
textarea {
height: 90px;
}
<form>
<div class="nb-hm-contact-grid row-fluid">
<input type="text" required />
<div class="nb-label-text">Name*</div>
</div>
<div class="nb-hm-contact-grid row-fluid">
<input type="email" required />
<div class="nb-label-text">Email address*</div>
</div>
<div class="nb-hm-contact-grid row-fluid">
<input type="text" required />
<div class="nb-label-text">Company Name*</div>
</div>
<div class="nb-hm-contact-grid row-fluid">
<textarea></textarea>
<div class="nb-label-text">What’s your project about?*</div>
</div>
</form>
我正在尝试仅使用 CSS 创建联系表单。当我们点击每个字段时,占位符必须向上移动。我创造了但它并不完美。电子邮件字段和文本区域字段无法正常工作。
最佳答案
在这些情况下不要使用固定值(如 bottom: 40px)因为你的元素的高度是不同的,你可以使用整个高度和 从中删除微小的填充,示例:
input:focus+.nb-label-text,
textarea:focus+.nb-label-text,
input:valid+.nb-label-text {
font-size: 12px;
color: #282828;
bottom: calc(100% - 10px);
}
关于html - CSS - 联系表单动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53238368/