无required属性输入框输入内容后失焦仍保持激活样式实现方法

问题根源 #

你当前的非必填输入框激活样式仅绑定了:focus（聚焦）和:invalid（校验不通过）两个伪类。由于不带required属性的输入框即使为空也会被判定为校验通过（:valid状态），因此失焦后两个伪类条件都不满足，样式会退回默认状态。

纯CSS实现方案（无需加required属性、无需写JavaScript） #

核心思路是用:placeholder-shown伪类替代:invalid判断输入框是否有内容，这个伪类只会在输入框显示占位文本时生效，完美适配非必填场景。

第一步：修改非必填输入框HTML #

给非必填输入框添加一个值为单个空格的placeholder属性，后续通过CSS把占位文本设为透明，保证页面上不会显示多余内容：

<div class="inputBox">
  <!-- 新增placeholder属性，值为单个空格 -->
  <input type="text" name="" placeholder=" ">
  <span>First Name</span>
</div>
<br>
<div class="inputBox_r">
  <input type="text" name="" required>
  <span>Last Name</span>
</div>

第二步：调整非必填输入框CSS #

首先新增占位符透明样式，再把原有绑定:invalid的选择器全部替换为:not(:placeholder-shown)（匹配「没有显示占位符，即用户已输入内容」的状态），完整修改后代码如下：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  gap: 30px;
  background: #1d2b3a;
}

/******************** Input Box - Not Required ********************/
.inputBox{
  position: relative;
  width: 250px;
}
.inputBox input{
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: #1d2b3a;
  border-radius: 5px;
  outline: none;
  color: #fff;
  font-size: 1em;
  transition: 0.5s;
}
/* 新增：隐藏占位符的空格，避免页面显示异常 */
.inputBox input::placeholder{
  color: transparent;
}

.inputBox span{
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size: 1em;
  color: rgba(255,255,255, 0.25);
  text-transform: uppercase;
  transition: 0.5s;
}
/* 替换:invalid为:not(:placeholder-shown) */
.inputBox input:not(:placeholder-shown) ~ span,
.inputBox input:focus ~ span{
  color: #00dfc4;
  transform: translateX(10px) translateY(-7px);
  font-size: 0.65em;
  padding: 0 10px;
  background: #1d2b3a;
  border-left: 1px solid #00dfc4;
  border-right: 1px solid #00dfc4;
  letter-spacing: 0.2em;
}
/* 替换:invalid为:not(:placeholder-shown) */
.inputBox input:not(:placeholder-shown),
.inputBox input:focus{
  border: 1px solid #00dfc4;
}



/******************** Input Box - Required ********************/

.inputBox_r{
  position: relative;
  width: 250px;
}
.inputBox_r input{
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: #1d2b3a;
  border-radius: 5px;
  outline: none;
  color: #fff;
  font-size: 1em;
  transition: 0.5s;
}

.inputBox_r span{
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size: 1em;
  color: rgba(255,255,255, 0.25);
  text-transform: uppercase;
  transition: 0.5s;
}
.inputBox_r input:valid ~ span,
.inputBox_r input:focus ~ span{
  color: #00dfc4;
  transform: translateX(10px) translateY(-7px);
  font-size: 0.65em;
  padding: 0 10px;
  background: #1d2b3a;
  border-left: 1px solid #00dfc4;
  border-right: 1px solid #00dfc4;
  letter-spacing: 0.2em;
}
.inputBox_r input:valid,
.inputBox_r input:focus{
  border: 1px solid #00dfc4;
}

.inputBox_r input:valid ~ span,
.inputBox_r input:focus ~ span{
  background: #00dfc4;
  color: #1d2b3a;
  border-radius: 2px;
}

效果说明 #

修改后非必填输入框的行为和必填框完全一致：

• 聚焦时边框高亮、标签上浮变色
• 输入内容后失焦，会一直保持激活样式
• 清空内容后失焦，自动退回默认未激活状态
• 不会触发任何非必填的表单校验逻辑，完全符合需求

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