如何使用 `:placeholder-shown` 通过 CSS 设置空输入字段的样式？

使用 CSS 设置空输入字段的样式：实用指南

设置空输入字段的样式对 CSS 来说是一个挑战，因为将空值与common value="" 选择器可能不可靠。为了有效地解决这种情况，我们深入研究了一种创新且有效的解决方案。

在现代浏览器中，:placeholder-shown 伪类可以解决这个问题。与针对占位符文本的 ::placeholder 不同，:placeholder-shown 专门选择空输入字段。这提供了一种在字段没有任何用户输入时应用样式的精确方法。

为了说明这种优雅的方法，请考虑以下 CSS 规则：

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

要利用此 CSS 规则实际上，记住输入字段必须具有占位符属性至关重要。此外，在 Chrome 浏览器中，确保占位符属性中存在空格字符对于正常功能至关重要。这保证了 :placeholder-shown 伪类按预期触发，即使输入字段最初对用户显示为空。

以下是演示实现的示例：

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

总之，通过利用 :placeholder-shown 的强大功能，我们能够轻松地在 CSS 中设置空输入字段的样式。这种创新的伪类消除了 value="" 选择器的限制，使开发人员能够轻松创建用户友好的表单。

以上是如何使用 `:placeholder-shown` 通过 CSS 设置空输入字段的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！