又一个布局利器, CSS 伪类 :placeholder-shown
作者:Samantha Ming 译者:前端小智 来源:medium
一般我们常见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;
}
原文:https://www.samanthaming.com/...
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Shell脚本条件测试与比较
- xtrabackup 实现MySQL数据库备份
- Rsync+Sersync实时同步文件
- CentOS7防火墙firewall操作命令
- centos7搭建NFS共享存储服务
- LVS-NAT负载均衡
- Kali-Dos洪水攻击之Hping3
- CVE-2018-8174 IE浏览器远程代码执行漏洞
- MFS传给CS sessions会话
- windows利用Hashcat字典破解WiFi密码
- tensorflow 使用CPU而不使用GPU的问题解决
- Python图像灰度变换及图像数组操作
- 典型算法的Python实现
- Spring是如何解决循环依赖的
- Python将两个列表转换为字典