如何在输入框非空时设置父容器外的Label样式？

我需要在input输入框不为空时，设置位于其父容器（.big）外的label元素样式，但现有代码无法生效。试过W3C规范里的各类选择器都没用，核心问题是label标签在包含input的.big容器之外。（混合使用Tailwind和常规CSS，因为这类复杂样式无法用Tailwind实现）

现有代码如下：

CSS代码 #

.container input:not(:placeholder-shown) > .contaienr label {
  margin-top: -11px;
}

HTML代码 #

<div class="container">
    <label id="floatingInput" class="text-white mt-[6px] ml-3 block z-0 absolute peer-focus:text-sm peer-focus:-mt-12 ease-in-out duration-150 peer-focus:z-20 peer-focus:bg-transpa after:z-20 after:content-[' '] after:absolute after:w-20 after:h-5 after:top-0 after:left-0">Enter your Password</label>
    <div class="big peer-focus:bg-blue-500 ease-in-out duration-150 overflow-visible">
        <input placeholder=' ' type="password" id="password" class="peer z-10 relative form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-transparent outline-none" />
    </div>
</div>

解决方案 #

目前CSS没有父选择器或前置兄弟选择器，无法直接通过input的状态选中它前面的label，可通过以下两种方式解决：

方案1：调整HTML结构+CSS兄弟选择器 #

把label移到包含input的.big容器之后，利用通用兄弟选择器~来选中label，同时调整label的定位保证视觉效果：

修改后的HTML：

<div class="container">
    <div class="big peer-focus:bg-blue-500 ease-in-out duration-150 overflow-visible">
        <input placeholder=' ' type="password" id="password" class="peer z-10 relative form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-transparent outline-none" />
    </div>
    <label id="floatingInput" class="text-white mt-[6px] ml-3 block z-0 absolute peer-focus:text-sm peer-focus:-mt-12 ease-in-out duration-150 peer-focus:z-20 peer-focus:bg-transpa after:z-20 after:content-[' '] after:absolute after:w-20 after:h-5 after:top-0 after:left-0">Enter your Password</label>
</div>

对应的CSS：

.container input:not(:placeholder-shown) ~ #floatingInput {
  margin-top: -11px;
  /* 补充其他需要的浮动样式 */
}

方案2：JavaScript监听输入状态+CSS类控制 #

通过JS监听input的输入事件，给父容器添加/移除类，再通过类来控制label样式：

JavaScript代码：

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

input.addEventListener('input', () => {
  container.classList.toggle('input-filled', input.value.trim() !== '');
});

对应的CSS：

.container.input-filled #floatingInput {
  margin-top: -11px;
}

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