详解CSS中的:placeholder-shown伪类


本文摘自PHP中文网,作者青灯夜游,侵删。

(学习视频分享:css视频教程)

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

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

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

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

1.png

placeholder-show是如何工作的?

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

1

2

3

4

5

6

7

8

// html

<input placeholder="placeholder text" />

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

 

// css

input:placeholder-shown, textarea:placeholder-shown{

  border:1px solid pink;

}

2.png

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

1

2

3

// html

<input placeholder="" />

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

3.png

:placeholder-shown vs ::placeholder

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

1

2

3

4

5

input:placeholder-shown {

  border: 1px solid pink;

  background: yellow;

  color: green;

}

4.png

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

1

2

3

input::placeholder {

  color: green;

}

5.png

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

1

2

3

4

5

input:placeholder-shown, textarea:placeholder-shown{

  font-style: italic;

  text-transform: uppercase;

  letter-spacing: 5px;

}

6.png

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

:placeholder-shown vs :empty

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

1

2

3

4

5

6

7

8

9

10

11

12

// html

<input value="not empty">

<input><!-- empty -->

 

// css

input:empty {

  border: 1px solid pink;

}

 

input {

  border: 1px solid black;

}

7.png

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

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

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

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

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

1

2

3

4

5

6

7

// html

<input placeholder=" "><!--  pass empty string -->

 

//css

input:placeholder-shown {

  border-color: pink;

}

8.png

组合其它选择器

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

1

2

3

4

5

6

7

//html

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

 

// css

input:not(:placeholder-shown) {

  border: 1px solid green;

}

实战

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

9.gif

具体代码如下:

Html

1

2

3

4

<div class="input">

    <input class="input-fill" placeholder="邮箱">

    <label class="input-label">邮箱</label>

</div>

Css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

.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/tidbits/88-css-placeholder-shown/

作者:Samantha Ming

更多编程相关知识,请访问:编程入门!!

以上就是详解CSS中的:placeholder-shown伪类的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css行内样式是内部样式吗

css的flex怎么根据内容更改高度

css怎么设置最小宽度

css怎么设置某一块固定

css实现等高布局的三种方式(代码示例)

css比html更复杂为什么还要用?

关于css里的块级格式

css实现三角的原理

css层叠样式表是什么

利用css变量来提高灵巧布局效率的小技巧

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...