textarea基于值的CSS选择器失效问题及替代方案咨询

问题原因 #

你用的:not([value=""])选择器无效，核心原因是：<textarea>的HTML value属性不会随着用户输入自动更新——只有初始写在标签里的value值会被CSS识别，用户输入的内容仅存于DOM的value属性（JS层面），不会同步到HTML属性上，所以CSS基于HTML属性的选择器抓不到内容变化。

两种解决办法 #

方法1：JavaScript监听输入添加自定义类

通过监听输入事件，根据内容是否为空给文本框添加/移除类，再用类来控制样式：

HTML：

<textarea class="multiline-input"></textarea>

JavaScript：

const textarea = document.querySelector('.multiline-input');
textarea.addEventListener('input', () => {
  // 内容非空时添加has-content类，为空则移除
  textarea.classList.toggle('has-content', textarea.value.trim() !== '');
});

CSS：

.multiline-input {
  background-color: #f7f7f7;
}

.multiline-input:focus {
  background-color: #ffffff;
  outline: 0.5px solid rgba(87, 85, 247, 0.74);
}

.multiline-input:not(:focus).has-content {
  background-color: #ffffff;
  outline: 0.5px solid #e1e1e8;
}

方法2：利用CSS的:placeholder-shown伪类

无需JS，只要给<textarea>设置占位符（哪怕是空的），就能用:not(:placeholder-shown)判断文本框有内容的状态：

HTML（添加空占位符）：

<textarea class="multiline-input" placeholder=" "></textarea>

（如果需要实际提示文本，也可以写placeholder="请输入内容"，不影响判断）

CSS：

.multiline-input {
  background-color: #f7f7f7;
}

.multiline-input:focus {
  background-color: #ffffff;
  outline: 0.5px solid rgba(87, 85, 247, 0.74);
}

.multiline-input:not(:focus):not(:placeholder-shown) {
  background-color: #ffffff;
  outline: 0.5px solid #e1e1e8;
}

注意：如果用空占位符，可通过color: transparent隐藏占位符文字，同时添加aria-label保证屏幕阅读器可识别。

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