如何仅使用 CSS 检测 HTML 输入字段中的文本输入？

使用 CSS 检测文本输入

使用 CSS 自定义网页时出现一个常见需求：能够检测输入字段是否包含文本。令人惊讶的是，这个功能并不是由 CSS 直接提供的。

尝试的解决方案

各种方法均不成功，包括使用 :empty 伪类和检查空值[value=""].

CSS 占位符方法

但是，如果输入字段有占位符属性，CSS 提供了解决方案：:placeholder-shown 伪类。该类可用于区分空输入字段和带有占位符的输入字段。

实现

关键是确保 placeholder 属性存在并包含非空白值，即使它只是一个空格。下面是一个例子：

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

结论

利用 :placeholder-shown 伪类，你可以有效地检测输入字段是否包含文本，即使在页面上你无法控制。

以上是如何仅使用 CSS 检测 HTML 输入字段中的文本输入？的详细内容。更多信息请关注PHP中文网其他相关文章！