CSS 检测输入是否有值

在前端开发中，经常需要对用户输入进行验证和处理。其中一个常见的需求就是检测输入是否有值。通过使用 CSS 可以实现这个功能，本文将介绍如何使用 CSS 检测输入是否有值。

方法一：:placeholder-shown 伪类

CSS 提供了一个 :placeholder-shown 伪类，用于判断输入框是否显示了占位符文本。通过结合该伪类和其他选择器，可以轻松地实现检测输入是否有值的效果。

以下是一个示例代码片段：

input:not(:placeholder-shown) {
  /* 输入框有值的样式 */
}

input:placeholder-shown {
  /* 输入框无值的样式 */
}

以上代码中，:not(:placeholder-shown) 选择器表示输入框不显示占位符文本，即输入框有值。:placeholder-shown 选择器表示输入框显示占位符文本，即输入框无值。通过设置对应的样式，可以根据输入框的有无值来进行不同的处理。

方法二：:valid 和 :invalid 伪类

另一个检测输入是否有值的方法是使用 :valid 和 :invalid 伪类。这两个伪类通常用于表单验证，但也可以用于检测输入是否有值。

以下是一个示例代码片段：

input:valid {
  /* 输入框有值的样式 */
}

input:invalid {
  /* 输入框无值的样式 */
}

以上代码中，:valid 选择器表示输入框的值是有效的，即输入框有值。:invalid 选择器表示输入框的值是无效的，即输入框无值。同样地，通过设置对应的样式，可以根据输入框的有无值来进行不同的处理。

使用场景

这些方法可以应用于各种输入框验证和交互需求。例如，可以在输入框为空时显示提示信息，或者为有值的输入框添加一个图标。

总的来说，通过使用 CSS 的伪类选择器，可以方便地检测输入框是否有值，并根据结果进行相应的样式设置和交互操作。

以上是关于如何使用 CSS 检测输入是否有值的介绍，希望对你有所帮助！