是否存在可检测input元素是否有输入内容的CSS选择器？

实现input输入内容后持续保持自定义边框颜色的方案 #

核心原因：:focus 伪类仅在元素处于聚焦状态时生效，失焦后自动失效，因此无法维持输入内容后的样式，可通过以下两种方案实现需求：

方案1：纯CSS实现（兼容性较好，现代浏览器均支持） #

• 实现逻辑：利用 :placeholder-shown 伪类判断输入框是否为空，只要输入框有内容（占位符隐藏），无论是否聚焦都应用自定义边框样式
• 前置要求：为input元素设置非空的placeholder属性，无提示需求可设置为空格占位

代码示例：

<input type="text" placeholder="请输入内容">

/* 输入框基础样式 */
input {
  border: 2px solid #eee;
  outline: none;
  padding: 4px 8px;
}
/* 聚焦时的边框样式 */
input:focus {
  border-color: #1677ff;
}
/* 有输入内容时（占位符隐藏）的边框样式，覆盖基础样式 */
input:not(:placeholder-shown) {
  border-color: #1677ff;
}

注意：纯CSS方案无法自动过滤全空格输入，如有内容校验需求建议使用JS方案。

方案2：JS实现（灵活度最高，支持自定义校验规则） #

• 实现逻辑：监听input的输入事件，自定义校验规则判断内容是否有效，通过动态增减类名控制边框样式

代码示例：

<input type="text" id="targetInput">

/* 输入框基础样式 */
input {
  border: 2px solid #eee;
  outline: none;
  padding: 4px 8px;
}
/* 聚焦、有有效内容时的边框样式 */
input:focus, input.has-content {
  border-color: #1677ff;
}

const inputEl = document.querySelector('#targetInput')

// 内容校验、样式更新公共方法
function updateBorderStyle() {
  // 可自定义校验规则，此处设置为去除首尾空格后非空即为有效内容
  const hasValidContent = inputEl.value.trim() !== ''
  inputEl.classList.toggle('has-content', hasValidContent)
}

// 监听输入事件实时更新样式
inputEl.addEventListener('input', updateBorderStyle)
// 页面初始化时如果有默认值，同步更新样式
updateBorderStyle()

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