联系表单输入动画BUG：点击单输入框触发全标签动画问题

问题现象 #

实现了点击输入框时标签文本上移的动画，但点击前两个输入框时会触发所有输入框的标签动画，第三个输入框无此问题，需要实现点击单个输入框仅触发对应标签的动画。

问题根源 #

1. 所有输入框和标签都放在同一个父容器中，用绝对定位的top百分比值控制标签位置，易受容器高度、元素数量影响导致定位混乱。
2. CSS选择器使用input:focus ~ #xxx，该选择器会选中当前输入框之后所有匹配对应ID的标签元素，而非仅紧跟的目标标签。

修复方案 #

将每个输入框与对应标签封装到独立子容器中，用类选择器替代ID选择器，让标签相对于自身所在的子容器定位，确保选择器仅作用于当前组内的标签。

修改后的HTML代码 #

<div class="contact-col">
    <div class="form-group">
        <input type="text" name="name" required>
        <span class="floating-label">Your name</span>
    </div>
    <div class="form-group">
        <input type="email" name="email" required>
        <span class="floating-label">Your email</span>
    </div>
    <div class="form-group">
        <input type="text" name="subject" required>
        <span class="floating-label">Subject</span>
    </div>
</div>

修改后的CSS代码 #

.contact-col {
    /* 保留原有容器样式，按需添加 */
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.contact-col input, .contact-col textarea {
    width: 100%;
    padding: 15px;
    outline: none;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.contact-col input:focus, .contact-col textarea:focus {
    border: 1px solid yellowgreen;
    box-shadow: 0 0 0 1px #8C7D50;
    transition: 25ms box-shadow ease-in-out;
}

.floating-label {
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    position: absolute;
    pointer-events: none;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    background: white;
    transition: 0.2s ease all;
    padding: 0 0.5rem;
}

.form-group input:focus ~ .floating-label,
.form-group input:not(:focus):valid ~ .floating-label {
    top: 0;
    left: 0.5rem;
    font-size: 14px;
    color: #8C7D50;
    font-weight: 400;
    transition: 0.2s ease-in-out;
}

修复说明 #

• 每个form-group作为独立容器并设置position: relative，让内部绝对定位的标签以该容器为参考，避免全局定位冲突。
• 使用类选择器.floating-label统一所有标签样式，减少冗余代码。
• 选择器.form-group input:focus ~ .floating-label确保仅当前输入框所在组内的标签会被触发动画，不会影响其他组元素。
• 标签初始位置用top: 50%配合transform: translateY(-50%)实现垂直居中，无需手动计算百分比，适配性更强。

内容的提问来源于stack exchange，提问作者TheNickster