作者：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 -->// cssinput: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 -->//cssinput:placeholder-shown {  border-color: pink;}

组合其它选择器

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

//html<input placeholder="placeholder" value="not empty" />// cssinput: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。