如何用CSS检测textarea是否存在滚动条？仅适配最新现代浏览器

首先明确：目前没有原生的:scrollbar-shown伪类选择器，你提到的textarea:has(:scrollbar-shown)写法完全无效，所有最新版本的现代浏览器（Chrome、Firefox、Safari、Edge等）都不支持这个不存在的伪类。

现有可行的替代方案 #

CSS本身无法直接读取元素的scrollHeight、clientHeight这类用于判断内容是否溢出的属性值，所以无法纯CSS实现滚动条显示状态的检测。如果要给显示滚动条的textarea设置特殊样式，需要结合JavaScript：

• 监听textarea的内容变化事件（input、change等）
• 比较textarea的scrollHeight（内容总高度）和clientHeight（可视区域高度）
• 当scrollHeight > clientHeight时，为textarea添加自定义类名（比如has-scrollbar），否则移除该类名
• 然后用CSS选择器针对类名设置样式

示例代码：

const textarea = document.querySelector('textarea');
function checkScrollbar() {
  textarea.classList.toggle('has-scrollbar', textarea.scrollHeight > textarea.clientHeight);
}
// 初始化检测
checkScrollbar();
// 内容变化时重新检测
textarea.addEventListener('input', checkScrollbar);

textarea.has-scrollbar {
  border-color: #f00;
  /* 其他针对有滚动条的样式 */
}

关于:has()的补充 #

虽然:has()选择器在最新现代浏览器中已经得到支持，但它无法结合不存在的伪类使用。目前:has()主要用于基于子元素/后代元素的存在或状态来选择父元素，比如textarea:has(:focus)选择获得焦点的textarea，但无法直接检测滚动条状态。

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