表单输入框三种背景色状态实现问题：空值、聚焦、非空状态背景色设置

我来帮你搞定这个表单状态的问题！你现在的核心痛点是：输入框填了内容后切走，背景色又变回初始状态，没法一眼看出哪些已经填过对吧？这其实是因为你用的CSS伪类不对，而且默认CSS没法直接判断输入框是否有持久的内容，下面给你两种可行的解决方案：

方案一：纯CSS实现（推荐，简单高效） #

你之前用的:empty伪类不适合输入框——它是判断元素内部有没有子节点，而输入框的内容存在value属性里，不是元素的子内容，所以哪怕输入框有值，:empty也会生效。我们可以用CSS的:placeholder-shown伪类来判断输入框是否为空（需要给输入框加个空占位符）：

步骤1：更新CSS代码 #

/* 空值状态：浅黄色（未填写且未聚焦时） */
form input:placeholder-shown:not(:focus), 
form textarea:placeholder-shown:not(:focus) {
  background-color: #fff1a6;
}

/* 非空状态：浅粉色（已填写且未聚焦时） */
form input:not(:placeholder-shown):not(:focus), 
form textarea:not(:placeholder-shown):not(:focus) {
  background-color: lightpink;
}

/* 聚焦状态：浅绿色（正在输入/选择时，优先级最高） */
form input:focus, 
form textarea:focus {
  background-color: #d3f8d3;
}

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

给你的表单输入框加上placeholder=""（哪怕是空字符串），这样:placeholder-shown才能生效：

<div class="form-outline bg_color-white">
  <input type="text" id="discordIS" name="discordIS" value="<?=$discordIS;?>" class="form-control" required placeholder="" />
  <label class="form-label" for="discordIS">Discord NAME</label>
</div>

这个方案的优势是不需要写JS，浏览器支持也很好，能自动处理初始有值的输入框（比如你的value="<?=$discordIS;?>"如果有值，占位符不会显示，直接应用非空状态的颜色）。

方案二：JavaScript辅助实现（兼容特殊场景） #

如果你的项目不能加占位符，或者需要更复杂的状态判断，可以用JS给输入框添加/移除类来标记状态：

步骤1：更新CSS代码 #

/* 空值状态：浅黄色（未标记为已填写且未聚焦） */
form input:not(.filled):not(:focus), 
form textarea:not(.filled):not(:focus) {
  background-color: #fff1a6;
}

/* 非空状态：浅粉色（已标记为已填写且未聚焦） */
form input.filled:not(:focus), 
form textarea.filled:not(:focus) {
  background-color: lightpink;
}

/* 聚焦状态：浅绿色（正在输入/选择时） */
form input:focus, 
form textarea:focus {
  background-color: #d3f8d3;
}

步骤2：添加JavaScript代码 #

这段JS会监听输入框的内容变化和焦点事件，自动给已填写的输入框加上filled类：

// 获取所有表单里的输入框和文本域
const formInputs = document.querySelectorAll('form input, form textarea');

// 检查输入框是否有内容的工具函数
function updateFilledState(input) {
  if (input.value.trim() !== '') {
    input.classList.add('filled');
  } else {
    input.classList.remove('filled');
  }
}

// 页面加载时先初始化所有输入框的状态（处理默认有值的情况）
formInputs.forEach(input => {
  updateFilledState(input);
  // 监听输入事件，实时更新状态
  input.addEventListener('input', () => updateFilledState(input));
  // 监听失去焦点事件，确保状态正确
  input.addEventListener('blur', () => updateFilledState(input));
});

这个方案更灵活，比如可以处理用户清空内容的情况，也不需要依赖占位符。

为什么你之前的代码失效？ #

你用的:empty伪类是判断元素内部是否有子节点，而输入框的内容是存在value属性中的，不是元素的子内容——所以哪怕输入框有值，CSS依然会认为它是:empty，导致失去焦点后又变回初始背景色，无法区分已填写状态。

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