如何让输入框有内容时标签保持在顶部不回退？

你的问题出在只有输入框聚焦时标签会上移，失去焦点后就回到原位。要实现有内容时标签固定在顶部，只需两步修改：

1. 修正label与input的关联 #

你的label的for属性值是name，但input的id是contact-full-name，两者不匹配，先把label的for改成和input的id一致：

<form id='contact-form'>
   <input className='contact-form-input' id='contact-full-name' placeholder='Full Name' type='text' name='name' required/>
   <label for='contact-full-name' className='contact-form-label'>Full Name</label>
</form>

2. 添加CSS的:valid伪类样式 #

利用input的required属性，当输入框有内容时会触发:valid状态，给这个状态下的label加上和聚焦时一样的上移样式：

#contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.contact-form-input{
    width: 100%;
    padding: 4px;
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
    border: 0;
    outline: 0;
    border-bottom: 2px solid #000;
    background: transparent;
    z-index: 1;
}
.contact-form-label{
    position: absolute;
    display: block;
    top: 5px;
    left: 4px;
    font-size: 20px;
    transition: .2s;
    z-index: 0;
}
#contact-full-name::placeholder{
    opacity: 1;
    color: transparent;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}

.contact-form-input:focus{
    color: brown;
    padding-bottom: 6px;
}
/* 保留聚焦时的标签样式 */
.contact-form-input:focus + .contact-form-label{
    color: red;
    top: -10px;
    font-size: 15px;
    transition: .2s;
}
/* 添加输入框有内容时的标签样式 */
.contact-form-input:valid + .contact-form-label{
    color: red;
    top: -10px;
    font-size: 15px;
    transition: .2s;
}

修改完成后，只要输入框内有内容（哪怕失去焦点），标签都会保持在顶部；清空内容后，标签会自动回到原位。

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