使用 CSS 匹配一个空的输入框 [英] Matching an empty input box using CSS

查看:12
本文介绍了使用 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆