CSS :placeholder-shown 有什么用？

使用此伪类来设置当前显示占位符文本的输入的样式，换句话说，用户未在文本框中键入任何内容 📭

根据您的输入是否为空，应用一些动态样式很是好 👏

input:placeholder-shown {
  border-color: pink;
}

它是如何工做的？

:placeholder-show 是CSS伪类，可以让您将样式应用于具备占位符文本的 <input> 或 <textarea>。

<input placeholder="placeholder text" />
<textarea placeholder="placeholder text"></textarea>

结果：

• 若是显示占位符，则为粉红色，表示用户未输入任何内容
• 若是未显示任何占位符，则为黑色，表示用户已键入内容

:placeholder-showd必须具备占位符

若是元素没有占位符文本，则此选择器将不起做用。

<input /><!-- 没有占位符 -->

<!-- 这也被视为没有占位符文本 -->
<input placeholder="" />

input:placeholder-shown {
  border-color: pink;
}

:placeholder-shown vs ::placeholder

所以，咱们可使用 :placeholder-shown 设置输入元素的样式。

input:placeholder-shown {
  border: 1px solid pink;
  background: yellow;
  color: green;
}

☝️嗯...注意到有些奇怪🤔——咱们将颜色设置为：绿色，但没有用。好吧，这是由于 :placeholder-shown 只针对输入自己。可是对于实际的占位符文本，您必须使用伪元素 ::placeholder。

input::placeholder {
  color: green;
}

可是！当我在处理这个问题时，我注意到还有一些其余属性，若是在 :placeholder-shown 级别应用，将会影响到占位符文本。

input:placeholder-shown {
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 5px;
}

如今，我真的不知道为何会发生这种状况 🤷‍♀️ 也许是由于这些属性被占位符继承了。

:placeholder-shown vs :empty

尽管 :placeholder-shown 是专门用于肯定元素是否显示占位符的。实际上，咱们可使用它来检查输入是否为空（固然，假设全部输入都有一个占位符）。所以，也许您的下一个问题是，咱们不能使用CSS empty吗？好吧，让咱们检查一下 👩‍🔬

<input value="not empty">
<input><!-- empty -->

input:empty {
  border: 1px solid pink;
}

input {
  border: 1px solid black;
}

期待：

• 若是为空则为粉红色
• 若是不为空为黑色

嗯...从这里开始，您可能会认为 :empty 彷佛在起做用，由于咱们看到的是粉红色边框。但这实际上不起做用😔

粉红色显示的缘由是由于伪类增长了特异性，相似于类选择器（即 .form-input）比类型选择器（即 input）具备更高的特异性。高特异性选择器将始终覆盖低特异性设置的样式。

这是判决！不要使用 :empty 检查输入元素是否为空🙅‍♀️

如何在没有占位符的状况下检查输入是否为空？

好了，因此咱们检查输入是否为空的惟一方法是使用 :placeholder-shown。可是，若是咱们的输入元素没有占位符，会发生什么状况？好吧，这是一个聪明的方法！传入一个空字符串 " "。

<input placeholder=" "><!-- 👈 传递空字符串 -->

input:placeholder-shown {
  border-color: pink;
}

与其余选择器组合

因此，咱们能够针对显示占位符文字的输入元素，这很酷。换句话说，若是显示了占位符文本，那么必定意味着该元素是空的。利用这些知识，咱们能够将这个伪类与其余选择器结合起来，作一些很是整洁的事情！让咱们来看看 🤩。

反向 :placeholder-shown 为 :not

咱们可使用 :not 伪类来作一些反向的事情。在这里，咱们能够在输入不是空的时候进行目标操做。

<input placeholder="placeholder" value="not empty" />

input:not(:placeholder) {
  border-color: green;
}

结果：

• 绿色，若是不为空，则表示用户已经输入了一些内容。
• 若是为空，则为黑色

浮动标签

使用占位符而不使用标签的问题之一就是无障碍，由于一旦你在打字的时候，占位符文字就没有了，这可能会致使用户的困惑。一个真正好的解决方案是浮动标签。最初，占位符文本显示时没有标签，而一旦用户开始输入，标签就会出现。这样一来，你仍然能够在不影响用户体验和可访问性的前提下，保持表单的简洁性。共赢 🥳

而这是能够用纯CSS实现的，咱们只须要将 placeholder-shown 与 :not 和 + 结合起来就能够了。这是一个超级简化版的浮动标签。

<input name="name" placeholder="Type name..." />
<label for="name">NAME</label>

label {
  display: none;
  position: absolute;
  top: 0;
}

input:not(:placeholder-shown) + label {
  display: block;
}

浏览器支持

对 :placeholder-shown 的支持很是好！这包括Internet Explorer（是的，我和你同样惊讶😆）。可是，对于IE，你须要使用非标准名称 :-ms-input-placeholder。