如何在用户输入内容时隐藏输入框Label以避免重叠？

不需要JavaScript就能解决这个问题，用CSS伪类就能实现输入内容时Label不重叠（或隐藏）的效果，以下是具体方案：

核心思路 #

利用CSS的:not(:placeholder-shown)伪类检测输入框是否有内容，结合:focus状态，让Label在输入框聚焦或有内容时改变位置（或隐藏），避免和输入内容重叠。

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

在HTML的每个input标签里加上placeholder=" "（注意保留空格），这样CSS才能识别输入框是否已输入内容：

<input type="email" value={email} onChange={handleEmailChange} placeholder=" " />
<!-- 密码输入框同样添加 -->
<input type="password" value={password} onChange={handlePasswordChange} placeholder=" " />

步骤2：更新CSS规则 #

根据需求选择以下两种方案之一：

方案A：输入内容时隐藏Label #

直接在输入框有内容或聚焦时隐藏Label：

/* 隐藏Label */
input:is(:focus, :not(:placeholder-shown)) ~ label {
  display: none;
}

/* 同步更新输入框边框样式 */
input:is(:focus, :not(:placeholder-shown)) {
  border-color: #0890EB;
}

/* 同步更新右侧图标颜色 */
input:is(:focus, :not(:placeholder-shown)) ~ img {
  color: #0890EB;
}

方案B：输入内容时Label上移（更友好，保留提示） #

让Label上移到输入框边框上方，既不遮挡内容又保留输入项提示：

input:is(:focus, :not(:placeholder-shown)) ~ label {
  color:#0890EB;
  background-color: #fff;
  top: 0;
  padding: 0 5px; 
  font-size: 12px;
}

input:is(:focus, :not(:placeholder-shown)) {
  border-color: #0890EB;
}

input:is(:focus, :not(:placeholder-shown)) ~ img {
  color:#0890EB;
}

完整修改后的代码 #

最终CSS #

.centered-container-form {
  padding-bottom: 25%;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.form-container {
  width: 100%;
}

.container{
  position: relative;
  max-width:245px;
  width: 100%;
  border-radius:6px;
  background-color: #fff;
}

.container .input-box{
  position:relative;
  height: 50px;
  background-color: red;
}

.input-box input{
  position:absolute;
  outline:none;
  height:100%;
  width:100%;
  border: 2px solid #ccc;
  padding: 0 35px 0 15px;
  transition: all 0.2s linear;
  border-radius:6px;
}

.input-box :is(label, img){
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  color:#999;
  transition: all 0.2s linear;
}

.input-box label{
  left: 15px ;
  pointer-events: none;
  font-size: 16px;
  font-weight:400;
  padding:0 5px; 
}

.input-box img {
  right:15px;
  height: 20px;
}

/* 更新后的状态样式 */
input:is(:focus, :not(:placeholder-shown)) ~ img{
  color:#0890EB;
}

input:is(:focus, :not(:placeholder-shown)) ~ label{
  color:#0890EB;
  background-color: #fff;
  top:0;
  padding:0 5px; 
  font-size: 12px;
}

input:is(:focus, :not(:placeholder-shown)){
  border-color: #0890EB;
}

最终HTML #

<div className="centered-container-form">  
  <form onSubmit={handleSubmit}>
    <div className='form-container'>     
      <div className='container'>
        <div className='input-box'>
          <input type="email" value={email} onChange={handleEmailChange} placeholder=" " />
          <label>Email/username</label>
        </div>
      </div>
      <br></br>
     
      <div className="container">
        <div className='input-box'>
          <input
            type="password"
            value={password}
            onChange={handlePasswordChange}
            placeholder=" "
          />  
          <label>Password</label>
        </div> 
      </div>
    </div>
  </form>
</div>

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