CSS中的:placeholder-shown伪类有什么用 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍CSS中的:placeholder-shown伪类有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

CSS伪类表示任何显示占位符文本的表单元素。
简单来说就是当输入框的占位符内容显示的时候,输入框干嘛干嘛。

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

<代码> placeholder-show>
<代码>:placeholder-shown CSS伪类在<代码> & lt; input> 或<代码> & lt; textarea> 元素显示占位符文本时生效,简单的说就是占位符有值才生效,如下所示:
//,html 　　& lt; input 占位符=皃laceholder text",/比; 　　& lt; textarea 占位符=皃laceholder text"祝辞& lt;/textarea>//,css 　　输入:placeholder-shown, textarea: placeholder-shown {, 　　边境才能:1 px solid 粉红色; 　　}

如果<代码>占位符> placeholder-show> //,html 　　& lt; input 占位符=啊?/比; 　　& lt; textarea 占位符=?text"祝辞& lt;/textarea>

:placeholder-shown vs:占位符

我们可以使用<代码>:placeholder-shown 设置输入<代码> 元素的样式。
输入:placeholder-shown { 　　边境才能:1 px solid 粉红色; 　　背景:才能,黄色; 　　,,颜色:绿色; 　　}

注意一些奇怪的问题,我们设置<代码>颜色:绿色> :placeholder-shown> 输入本身。对于实际的占位符文本,必须使用伪元素<代码>::占位符。
输入::placeholder { 　　,,颜色:绿色; 　　}

我注意到有一些其他的属性,如果应用<代码>::placeholder-shown> 占位符> 输入:placeholder-shown,, textarea: placeholder-shown {, 　　,,字体样式:斜体; 　　首字母才能:大写; 　　字母间距才能:5 px; 　　}

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

:placeholder-shown vs:空

<代码>:placeholder-shown> 内容是否为空(假设所有的<代码>输入> 也是可以的吧?我们来看看。
//,html 　　& lt; input 价值=https://www.yisu.com/zixun/安豢铡? 　　<输入> //css 　　输入:空{ 　　边界:1 px固体粉红色; 　　} 　　　　输入{ 　　边界:1 px固体黑色; 　　}

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

之所以显示粉红色,是因为伪类增加了css的权重。类似于类选择器(即<代码>。表单输入> 输入>
所以我们可以这样说:不要使用<代码>:空>
如果检查输入内容是否为空(在没有点位符的情况下)?

我们检查输入是否为空的唯一方法是使用<代码>:placeholder-shown> ““。
//,html 　　& lt; input 占位符=?“在& lt; !,,, pass empty string ——比;//css 　　输入:placeholder-shown { 　　,,边框颜色:粉色; 　　}

组合其它选择器

我们可以使用<代码>:不是伪类对某些事物进行逆运算。在这里,我们可以在输入不是空的情况下进行定位。
//html 　　& lt; input 占位符=皃laceholder", value=https://www.yisu.com/zixun/"非空"/>//css 　　输入:没有(placeholder-shown) { 　　边界:1 px固体绿色; 　　}
实战
CSS中的:placeholder-shown伪类有什么用