CSS 如何检测外部网站输入字段中是否存在文本？

在不可控页面中使用 CSS 检测输入文本存在

检测输入字段中的文本存在是一项常见任务，但传统方法如 :empty和 [value=""] 可能无法在所有场景下有效工作。对于 JavaScript 无法访问的情况，可以利用 CSS 样式来实现此目标。

使用 :placeholder-shown 伪类

如果输入元素包含占位符属性， :placeholder-shown 伪类开始发挥作用。此伪类针对占位符文本可见的输入字段，表示该字段为空。

实现：

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

示例用法：

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

通过这种方法，前两个输入将接收应用于:not(:placeholder-shown) 因为它们包含文本或具有非空占位符值。第三个输入有占位符但没有文本，将接收应用于 :placeholder-shown 的样式。

当使用浏览器扩展（如）处理应用于第三方页面的主题和样式时，此方法特别有用时尚，因为它允许根据输入字段中是否存在文本进行自定义，而不需要 JavaScript。

以上是CSS 如何检测外部网站输入字段中是否存在文本？的详细内容。更多信息请关注PHP中文网其他相关文章！