乐趣区

关于前端:CSS-placeholdershown-有什么用

jiezi

应用此伪类来设置以后显示占位符文本的输出的款式，换句话说，用户未在文本框中键入任何内容 📭

依据您的输出是否为空，利用一些动静款式十分好 👏

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。

退出移动版