Matching an empty input box using CSS(使用 CSS 匹配一个空的输入框)

本文介绍了使用 CSS 匹配一个空的输入框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何将样式应用于空输入框?如果用户在输入字段中键入内容，则不应再应用该样式.这在 CSS 中可能吗?我试过这个:

How do I apply a style to an empty input box? If the user types something in the input field, the style should no longer be applied. Is this possible in CSS? I tried this:

input[value=""]

推荐答案

在现代浏览器中，您可以使用 :placeholder-shown 来定位空输入(不要与 :: 混淆)占位符).

In modern browsers you can use :placeholder-shown to target the empty input (not to be confused with ::placeholder).

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

更多信息和浏览器支持:https://css-tricks.com/almanac/selectors/p/占位符显示/

More info and browser support: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

这篇关于使用 CSS 匹配一个空的输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！