使用 CSS 匹配一个空的输入框 [英] Matching an empty input box using 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 匹配一个空的输入框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文