今天小编给大家分享一下CSS中的placeholder-shown怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

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

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

它是如何工作的？

:placeholder-show

<input>

<textarea>

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

结果：

• 如果显示占位符，则为粉红色，表示用户未输入任何内容

• 如果未显示任何占位符，则为黑色，表示用户已键入内容

:placeholder-showd

如果元素没有占位符文本，则此选择器将不起作用。

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

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

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

:placeholder-shown

::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

:empty

尽管

:placeholder-shown

<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

:-ms-input-placeholder