html - CSS - 联系表单动画

Question

.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 创建联系表单。当我们点击每个字段时，占位符必须向上移动。我创造了但它并不完美。电子邮件字段和文本区域字段无法正常工作。

Answer 1

在这些情况下不要使用固定值(如 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);
}