又一个布局利器， CSS 伪类 :placeholder-shown

做者：Samantha Ming
译者：前端小智
来源：medium

点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

通常咱们常见placeholder伪类选择器用来修改默认样式及文案，突然发现placeholder-shown伪类选择器，比较官方的解释是

CSS伪类表示任何显示占位符文本的form元素。

简单来讲就是当输入框的placeholder内容显示的时候，输入框干吗干吗。

兼容性以下，在移动端没什么问题

placeholder-show是如何工做的？

:placeholder-shown CSS 伪类 在 <input> 或 <textarea> 元素显示 placeholder text 时生效，简单的说就是 placeholder 有值才生效，以下所示：

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

// css 
input:placeholder-shown, textarea:placeholder-shown{ 
  border:1px solid pink;
}

若是 placeholder 为空 placeholder-show 就没效果了：

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

:placeholder-shown vs ::placeholder

咱们可使用:placeholder-shown设置input元素的样式。

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

注意一些奇怪的问题🤔-咱们设置 color: green，但没有做用用。这是由于:placeholder-shown仅会针对input自己。对于实际的占位符文本，必须使用伪元素::placeholder。

input::placeholder {
  color: green;
}

⚠️ 我注意到有一些其余的属性，若是应用::placeholder-shown，也会影响placeholder的样式。

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

我也不知道这是啥状况，也许是由于这些属性被placeholder继承了，若是你知道缘由，欢迎留言告诉我一下，谢谢。

:placeholder-shown vs :empty

:placeholder-shown是专门用于肯定元素是否显示占位符的对象，咱们主要使用它来检查input 内容是否为空（假设全部的input都有一个占位符）。 这里你可能会想，使用 empty 也是能够的吧？咱们来看看。

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

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

input {
  border: 1px solid black;
}

这里看似empty起做用了，由于咱们看到的是粉红色边框，但这实际上不起做用😔

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

因此咱们能够这样说：不要使用:empty检查输入元素是否为空。

若是检查 input 内容是否为空（在没有点位符的状况下）？

咱们检查输入是否为空的惟一方法是使用:placeholder-shown。可是若是咱们的输入元素没有占位符会发生什么呢? 这里有个取巧的方法：传入一个空字符串" "。

// html
<input placeholder=" "><!-- 👈 pass empty string -->

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

组合其它选择器

咱们可使用:not伪类对某些事物进行逆运算。 在这里，咱们能够在输入不是空的状况下进行定位。

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

// css
input:not(:placeholder-shown) {
  border: 1px solid green;
}

实战

用placeholder-shown咱们能够实现下面动效

具体代码以下:

Html

<div class="input">
    <input class="input-fill" placeholder="邮箱">
    <label class="input-label">邮箱</label>
</div>

Css

.input{
   position: relative;
 }
.input-fill{
  border: 1px solid #ececec;
  outline: none;
  padding: 13px 16px 13px;
  font-size: 16px;
  line-height: 1.5;
  width: fit-content;
  border-radius: 5px;
}
.input-fill:placeholder-shown::placeholder {
  color: transparent;
}
.input-label {
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  left: 16px; top: 14px;
  color: #a2a9b6;
  padding: 0 2px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: all .25s;
}
.input-fill:focus{
  border: 1px solid #2486ff;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
  transform: scale(0.75) translate(0, -32px);
  background-color: #fff;
  color: #2486ff;
}

人才们的 【三连】 就是小智不断分享的最大动力，若是本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢你们的观看。

---

编辑中可能存在的bug无法实时知道，过后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://www.samanthaming.com/...

---

交流

文章每周持续更新，能够微信搜索 【大迁世界 】 第一时间阅读，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。