#书摘 #css #前端
《CSS 选择器世界》 占位符显示伪类 :placeholder-shown

:placeholder-shown 伪类的匹配和 placeholder 属性密切相关。:placeholder-shown顾名思义就是“占位符显示伪类”，表示当输入框的placeholder内容显示的时候，匹配该输入框。使用场景如下

1.可用于实现Material Design风格占位符交互效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题存在。

首先，使浏览器默认的 placeholder 效果不可见，只需将 color 设置为 transparent，CSS如下：

/* 默认placeholder颜色透明不可见 */ 
.input-fill:placeholder-shown::placeholder { 
   color: transparent; 
}


然后，用下面的.input-label元素替代浏览器原生的占位符而成为我们看到的占位符。我们可以采用绝对定位：

.input-fill-x { 
   position: relative; 
} 
.input-label { 
   position: absolute; 
   left: 16px; top: 14px; 
   pointer-events: none; 
}


最后，在输入框聚焦以及占位符不显示的时候对 <label> 元素进行重定位（缩小并移动到上方）：

.input-fill:not(:placeholder-shown) ~ .input-label, 
.input-fill:focus ~ .input-label { 
   transform: scale(0.75) translate(0, -32px); 
}


效果达成！显然，这要比使用JavaScript写各种事件和判断各种场景简单多了。
眼见为实，读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-1.php 体验与学习。


2.:placeholder-shown与空值判断
由于placeholder内容只在空值状态的时候才显示，因此我们可以借助:placeholder- shown伪类来判断一个输入框中是否有值。
例如：

textarea:placeholder-shown + small::before, 
input:placeholder-shown + small::before { 
   content: '尚未输入内容'; 
   color: red; 
   font-size: 87.5%; 
} 
<input placeholder=" "> <small></small> 
<textarea placeholder=" "></textarea> <small></small>


可以看到输入框中尚未输入内容的时候出现了空值提示信息

https://memo.cosine.ren/m/400
demo.cssworld.cn
:placeholder-shown与占位符交互 » CSS选择器世界demo演示
CSS选择器世界demo实例演示页面之 :placeholder-shown与占位符交互
 
 
Back to Top