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

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

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

兼容性如下,在移动端没什么问题,主要是ie

用这个我们可以实现下面动效

具体代码如下

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: 2px;
transform-origin: ;
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(, -32px);
background-color: #fff;
color: #2486ff;
}

placeholder-shown的更多相关文章

  1. 关于 div 的 contenteditable 使用,placeholder 和 复制图片显示并上传,按住 enter+ctrl 内容换行

    当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化. 于是可以使用 contenteditable 就是给 div 加上该属性.就变得丰富起来.使 ...

  2. bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】

    背景:记录写hostmanger中用户下拉框关联部门遇到的问题及解决方法 问题:需求是展示页面展示用户所属的部门,点击修改按钮后,弹出对应的model,这个时候部门的select要默认选中用户所在的s ...

  3. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  4. Placeholder如何换行

    使用js动态添加标签充,处理换行问题 var placeholder = 'This is a line \nthis should be a new line'; $('textarea').att ...

  5. 关于input标签和placeholder在IE8,9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  6. 兼容IE8 input的placeholder的文字显示

    if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholde ...

  7. input type="datetime-local" 时placeholder不显示

    一个坑,input的type="datetime-local" 时,电脑上会显示提示,如图 <input type="datetime-local" na ...

  8. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. UITextField的placeholder文字的位置,颜色等的自定义设置

    //控制placeHolder的位置,左右缩20 -(CGRect)placeholderRectForBounds:(CGRect)bounds { CGRect inset = CGRectMak ...

  10. placeholder实现的两种方式

    /** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...

随机推荐

  1. HDU3018:Ant Trip(欧拉回路)

    Ant Trip Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  2. Python:更改字典的key

    思路:先删除原键值对,保存值,然后以新键插入字典 格式:dict[newkey] = dict.pop(key) d = {'a':1, 'aa':11} d['b'] = d.pop('a') d[ ...

  3. mysql基础之三:char与varchar区别,varchar(M)能存多少

    char与varchar区别 char (13)长度固定, 如'1234567890' 存储需要空间 10个字符; varchar(13) 可变长 如'1234567890' 需要存储空间 11字符; ...

  4. Java访问子类对象的实例变量

    对于Java这种语言来说,一般来说,子类可以调用父类中的非private变量,但在一些特殊情况下, Java语言可以通过父类调用子类的变量 具体的还是请按下面的例子吧! package com.yon ...

  5. IDEA 热部署 + 下载jar包放到maven中

    IDEA 热部署: 1 :  POM中加入devtools的依赖,就可以实现热部署 <dependency> <groupId>org.springframework.boot ...

  6. Java Numbers

    通常情况下,当我们与数字打交道,使用原始数据类型,如字节,如int,long,double等 例子: int i = 5000; float gpa = 13.65; byte mask = 0xaf ...

  7. nodejs PK php全方位比较PHP的Node.js的优缺点

    全方位比较PHP的Node.js的优缺点 http://www.techug.com/php-vs-node-js

  8. unity3d AssetStore 下载的资源位置

    Win7,8和Win10系统下: 进入C:\Users\“用户名”目录,然后打开文件夹选项的显示隐藏文件选项 再进入AppData\Roaming\Unity/Asset Store-5.x下找到 M ...

  9. VS连接SQL Server数据库,增删改查详细教程(C#代码)_转载

    工具: 1.Visual Studio (我使用的是vs2013) 2.SQL Server  (我使用的是sql server2008) 操作: 1.打开SQL Server,打开后会看到数据库的初 ...

  10. All Roads Lead to Rome(30)(MAP【int,string】,邻接表,DFS,模拟,SPFA)(PAT甲级)

    #include<bits/stdc++.h>using namespace std;map<string,int>city;map<int,string>rcit ...