在移动端,如果标签和输入框在一行中显示,显示的有点窄。
如果标签和输入框各占一行显示,又浪费空间。有没有两全其美的方案呢?
Material Design 提供了一个两全其美的方案。输入框没有值时,标签在输入框中显示。在输入框中有值或获得焦点时,标签在上方显示。如下图所示:
可以用 CSS 的 :placeholder-shown
伪类可以实现上面的效果。:placeholder-shown
作用于显示占位符时的元素。输入框在有值或获得焦点时,不显示占位符,可以用选择器 :not(:placeholder-shown)
匹配。下面是具体是实现:
HTML 结构:
第 1 步 隐藏浏览器默认的 placeholder
。
第 2 步 设置: 输入框显示占位符时的样式。
第 3 步 设置: 输入框不显示占位符(即获得焦点或有值)时的样式。
完成~
:placeholder-shown
的兼容性很好。
Can I Use
在项目中用起来吧~
觉得本文对你有帮助。点个赞,分享给小伙伴们吧~