乐趣区

关于javascript:又一个布局利器-CSS-伪类-placeholdershown

作者: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。

退出移动版