placeholder-shown
一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是
简单来说就是当输入框的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的更多相关文章
- 关于 div 的 contenteditable 使用,placeholder 和 复制图片显示并上传,按住 enter+ctrl 内容换行
当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化. 于是可以使用 contenteditable 就是给 div 加上该属性.就变得丰富起来.使 ...
- bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】
背景:记录写hostmanger中用户下拉框关联部门遇到的问题及解决方法 问题:需求是展示页面展示用户所属的部门,点击修改按钮后,弹出对应的model,这个时候部门的select要默认选中用户所在的s ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- Placeholder如何换行
使用js动态添加标签充,处理换行问题 var placeholder = 'This is a line \nthis should be a new line'; $('textarea').att ...
- 关于input标签和placeholder在IE8,9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- 兼容IE8 input的placeholder的文字显示
if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholde ...
- input type="datetime-local" 时placeholder不显示
一个坑,input的type="datetime-local" 时,电脑上会显示提示,如图 <input type="datetime-local" na ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- UITextField的placeholder文字的位置,颜色等的自定义设置
//控制placeHolder的位置,左右缩20 -(CGRect)placeholderRectForBounds:(CGRect)bounds { CGRect inset = CGRectMak ...
- placeholder实现的两种方式
/** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...
随机推荐
- HDU3018:Ant Trip(欧拉回路)
Ant Trip Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- Python:更改字典的key
思路:先删除原键值对,保存值,然后以新键插入字典 格式:dict[newkey] = dict.pop(key) d = {'a':1, 'aa':11} d['b'] = d.pop('a') d[ ...
- mysql基础之三:char与varchar区别,varchar(M)能存多少
char与varchar区别 char (13)长度固定, 如'1234567890' 存储需要空间 10个字符; varchar(13) 可变长 如'1234567890' 需要存储空间 11字符; ...
- Java访问子类对象的实例变量
对于Java这种语言来说,一般来说,子类可以调用父类中的非private变量,但在一些特殊情况下, Java语言可以通过父类调用子类的变量 具体的还是请按下面的例子吧! package com.yon ...
- IDEA 热部署 + 下载jar包放到maven中
IDEA 热部署: 1 : POM中加入devtools的依赖,就可以实现热部署 <dependency> <groupId>org.springframework.boot ...
- Java Numbers
通常情况下,当我们与数字打交道,使用原始数据类型,如字节,如int,long,double等 例子: int i = 5000; float gpa = 13.65; byte mask = 0xaf ...
- nodejs PK php全方位比较PHP的Node.js的优缺点
全方位比较PHP的Node.js的优缺点 http://www.techug.com/php-vs-node-js
- unity3d AssetStore 下载的资源位置
Win7,8和Win10系统下: 进入C:\Users\“用户名”目录,然后打开文件夹选项的显示隐藏文件选项 再进入AppData\Roaming\Unity/Asset Store-5.x下找到 M ...
- VS连接SQL Server数据库,增删改查详细教程(C#代码)_转载
工具: 1.Visual Studio (我使用的是vs2013) 2.SQL Server (我使用的是sql server2008) 操作: 1.打开SQL Server,打开后会看到数据库的初 ...
- 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 ...