前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >又一个布局利器, CSS 伪类 :placeholder-shown

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

作者头像
前端小智@大迁世界
发布2020-07-27 10:05:48
1.9K0
发布2020-07-27 10:05:48
举报
文章被收录于专栏:终身学习者终身学习者

作者:Samantha Ming 译者:前端小智 来源:medium

一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是

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

简单来说就是当输入框的placeholder内容显示的时候,输入框干嘛干嘛。

兼容性如下,在移动端没什么问题

clipboard.png
clipboard.png

placeholder-show是如何工作的?

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

代码语言:javascript
复制
// html
<input placeholder="placeholder text" />
<textarea placeholder="placeholder text"></textarea>

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

如果 placeholder 为空 placeholder-show 就没效果了:

代码语言:javascript
复制
// html
<input placeholder="" />
<textarea placeholder=" text"></textarea>
clipboard.png
clipboard.png

:placeholder-shown vs ::placeholder

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

代码语言:javascript
复制
input:placeholder-shown {
  border: 1px solid pink;
  background: yellow;
  color: green;
}
clipboard.png
clipboard.png

注意一些奇怪的问题?-我们设置 color: green,但没有作用用。这是因为:placeholder-shown仅会针对input本身。对于实际的占位符文本,必须使用伪元素::placeholder

代码语言:javascript
复制
input::placeholder {
  color: green;
}
clipboard.png
clipboard.png

我注意到有一些其他的属性,如果应用::placeholder-shown,也会影响placeholder的样式。

代码语言:javascript
复制
input:placeholder-shown, textarea:placeholder-shown{ 
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 5px;
}
clipboard.png
clipboard.png

我也不知道这是啥情况,也许是因为这些属性被placeholder继承了,如果你知道原因,欢迎留言告诉我一下,谢谢。

:placeholder-shown vs :empty

:placeholder-shown是专门用于确定元素是否显示占位符的对象,我们主要使用它来检查input 内容是否为空(假设所有的input都有一个占位符)。 这里你可能会想,使用 empty 也是可以的吧?我们来看看。

代码语言:javascript
复制
// html
<input value="not empty">
<input><!-- empty -->

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

input {
  border: 1px solid black;
}
clipboard.png
clipboard.png

这里看似empty起作用了,因为我们看到的是粉红色边框,但这实际上不起作用?

之所以显示粉红色,是因为伪类增加了 css 的权重。 类似于类选择器(即.form-input)比类型选择器(即input)具有更高的权重。 高权限选择器将始终覆盖低权重设置的样式。

所以我们可以这样说:不要使用:empty检查输入元素是否为空。

如果检查 input 内容是否为空(在没有点位符的情况下)?

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

代码语言:javascript
复制
// html
<input placeholder=" "><!-- ? pass empty string -->

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

组合其它选择器

我们可以使用:not伪类对某些事物进行逆运算。 在这里,我们可以在输入不是空的情况下进行定位。

代码语言:javascript
复制
//html
<input placeholder="placeholder" value="not empty" />

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

实战

placeholder-shown我们可以实现下面动效

图片描述
图片描述

具体代码如下:

Html

代码语言:javascript
复制
<div class="input">
    <input class="input-fill" placeholder="邮箱">
    <label class="input-label">邮箱</label>
</div>

Css

代码语言:javascript
复制
.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;
}

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • placeholder-show是如何工作的?
  • :placeholder-shown vs ::placeholder
  • :placeholder-shown vs :empty
  • 如果检查 input 内容是否为空(在没有点位符的情况下)?
  • 组合其它选择器
  • 实战
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档