在移动端，如果标签和输入框在一行中显示，显示的有点窄。

in-row.jpg

如果标签和输入框各占一行显示，又浪费空间。有没有两全其美的方案呢？

Material Design 提供了一个两全其美的方案。输入框没有值时，标签在输入框中显示。在输入框中有值或获得焦点时，标签在上方显示。如下图所示:

material-demo.gif

解决方案

可以用 CSS 的 :placeholder-shown 伪类可以实现上面的效果。:placeholder-shown 作用于显示占位符时的元素。输入框在有值或获得焦点时，不显示占位符，可以用选择器 :not(:placeholder-shown) 匹配。下面是具体是实现：

HTML 结构:

  1. <div class="input-fill-x">
  2.     <input class="input-fill" placeholder="name">
  3.     <label class="input-label">name</label>
  4. </div>

第 1 步 隐藏浏览器默认的 placeholder。

  1. .input-fill:placeholder-shown::placeholder {
  2.     color: transparent;
  3. }

第 2 步 设置: 输入框显示占位符时的样式。

  1. .input-fill-x {
  2.     position: relative;
  3. }
  4. .input-label {
  5.     position: absolute;
  6.     left: 16px; top: 14px;
  7.     pointer-events: none;
  8. }

第 3 步 设置: 输入框不显示占位符(即获得焦点或有值)时的样式。

  1. .input-fill:not(:placeholder-shown) ~ .input-label,
  2. .input-fill:focus ~ .input-label {
  3.     transform: scale(0.75) translate(0, -32px);
  4. }

完成~

:placeholder-shown 的兼容性很好。

caniuse.jpg

在项目中用起来吧~

觉得本文对你有帮助。点个赞，分享给小伙伴们吧~

参考文档