输入框有内容时如何固定Label位置避免与输入内容重叠？

目前你的代码仅通过focus-within触发Label上移，输入框失焦且有内容时Label会回退到原始位置，导致和输入内容重叠。以下是两种可行的解决方式：

方案1：CSS :has()伪类（现代浏览器适用） #

直接用CSS检测输入框是否有内容，无需额外JS，适配Chrome 105+、Firefox 121+、Safari 15.4+：

步骤1：修改CSS代码 #

添加输入框非空时的Label样式触发条件：

.form-label {
    position: absolute;
    pointer-events: none;
    transform: translate(0, 23px) scale(1);
    transform-origin: top left;
    transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    color: #6f81a5;
    font-size: 16px;
    line-height: 1;
    left: 46px;
    top: -11px;
    z-index: 100;
}

/* 输入框聚焦或有内容时，保持Label上移缩小状态 */
.input-container:focus-within label,
.input-container:has(input:not(:placeholder-shown)) label {
    transform: translate(0, 12px) scale(0.8);
    color: #0a53e4;
    padding-top: 5px;
}

/* 给容器添加相对定位，确保Label定位正确 */
.input-container {
  position: relative;
}

步骤2：给输入框添加空占位符 #

:placeholder-shown伪类依赖占位符，所以需要给input加空的placeholder：

<input id="password" type="password" class="form-control" aria-label="Password" aria-describedby="Password" placeholder=" ">

方案2：JavaScript处理（兼容旧浏览器） #

如果要适配不支持:has()的旧浏览器，用JS监听输入框内容变化，给父容器添加/移除类：

步骤1：添加JS代码 #

const passwordInput = document.getElementById('password');
const inputContainer = passwordInput.closest('.input-container');

// 监听输入事件，根据内容切换类
passwordInput.addEventListener('input', () => {
  inputContainer.classList.toggle('has-content', passwordInput.value.trim() !== '');
});

// 页面加载时检测初始值
window.addEventListener('load', () => {
  inputContainer.classList.toggle('has-content', passwordInput.value.trim() !== '');
});

步骤2：修改CSS代码 #

添加对has-content类的支持：

.form-label {
    position: absolute;
    pointer-events: none;
    transform: translate(0, 23px) scale(1);
    transform-origin: top left;
    transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    color: #6f81a5;
    font-size: 16px;
    line-height: 1;
    left: 46px;
    top: -11px;
    z-index: 100;
}

.input-container:focus-within label,
.input-container.has-content label {
    transform: translate(0, 12px) scale(0.8);
    color: #0a53e4;
    padding-top: 5px;
}

.input-container {
  position: relative;
}

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