CSS自适应的占位符效果
一种不错的自适应input效果,分享一下。 html section :
1 <div style="width:500px;height:500px;margin:300px auto;border: 1px solid red;"> 2 <form style="width: 280px; height: 500px; margin:1em auto;"> 3 <input required='' type='text'/> 4 <label alt='请输入旧密码' placeholder='请输入旧密码'></label> 5 <input required='' type='text'/> 6 <label alt='请输入新密码' placeholder='请输入新密码'></label> 7 <input required='' type='text'/> 8 <label alt='请确认新密码' placeholder='请确认新密码'></label> 9 </form> 10 </div>
style section :
1 input[type="text"] { 2 -webkit-box-sizing: border-box; 3 -moz-box-sizing: border-box; 4 box-sizing: border-box; 5 width: 100%; 6 margin: 0 0 10px; 7 padding: 12px; 8 border: 1px solid #cccccc; 9 border-radius: 5px; 10 background: #fff; 11 resize: none; 12 outline: none; 13 } 14 input[type="text"][required]:focus { 15 box-shadow: 1px 1px 5px #444; 16 -webkit-transition-duration: .2s; 17 transition-duration: .2s; 18 pointer-events: none; 19 } 20 input[type="text"][required]:focus + label[placeholder]:before { 21 color: #000; 22 } 23 input[type="text"][required]:focus + label[placeholder]:before, 24 input[type="text"][required]:valid + label[placeholder]:before { 25 -webkit-transition-duration: .2s; 26 transition-duration: .2s; 27 -webkit-transform: translate(-110px,10px) scale(0.9, 0.9); 28 /*-ms-transform: translate(-110px,10px) scale(0.8, 0.8);*/ 29 transform: translate(-110px,10px) scale(0.9, 0.9); 30 color: #00FFFF; 31 /*字体缩放*/ 32 } 33 input[type="text"][required]:invalid + label[placeholder][alt]:before { 34 content: attr(alt); 35 } 36 input[type="text"][required] + label[placeholder] { 37 display: block; 38 pointer-events: none; 39 line-height: 36px; 40 /*placeholder position*/ 41 margin-top: -webkit-calc(-48px - 2px); 42 margin-top: calc(-48px - 2px); 43 margin-bottom: -webkit-calc((40px - 10px) + 2px); 44 margin-bottom: calc((40px - 10px) + 2px); 45 } 46 input[type="text"][required] + label[placeholder]:before { 47 content: attr(placeholder); 48 display: inline-block; 49 margin: 0 -webkit-calc(1em + 2px); 50 margin: 0 calc(10px + 2px); 51 padding: 0 2px; 52 color: #898989; 53 white-space: nowrap; 54 -webkit-transition: 0.3s ease-in-out; 55 transition: 0.3s ease-in-out; 56 -webkit-background-size: 100% 5px; 57 background-size: 100% 5px; 58 background-repeat: no-repeat; 59 background-position: center; 60 }
效果图 :
但是IE不兼容,具体效果可以自己测试一下,当鼠标点击input时占位符是淡出去的效果。
转载于:https://www.cnblogs.com/lstory/p/6805511.html
CSS自适应的占位符效果相关推荐
- Adaptive Placeholder – 自适应的占位符效果
在早期,我们都是通过使用 JavaScript 来实现占位符功能.而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能.这里向大家分享一个自适应的占位符 ...
- 如何在css中设置音乐效果,css实现简单音乐符效果
css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 1 2 3 4 5 6 7 Document 8 9 .box{ 10 width:60px; ...
- 占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏
在HTML5中可以对文本输入框增加placeholder属性,英文placeholder意思是占位符,用在文本输入框的时候可以友好的显示提示文字,例如下面这个就是常见的文本框提示效果: 对于IE浏览器 ...
- js空格占位符_灵活使用 console 让 js 调试更简单
Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法.适当使用这些方法 ...
- 使用CSS更改HTML5输入的占位符颜色
Chrome支持input[type=text]元素的占位符属性 (其他人也可能这样做). 但是以下CSS对占位符的值没有任何作用: input[placeholder], [placeholder] ...
- css控制图文混排、图文自适应容器显示的效果
闲来无聊,写了一个css控制图文混排.图文自适应容器显示的效果. 下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果. 留存参考: <!DOCTYPE html /&g ...
- html改变占位字符的颜色,使用CSS更改HTML5输入的占位符颜色
达令说 /* do not group these rules */*::-webkit-input-placeholder { color: red;}*:-moz-placeholder { ...
- css带占位符的搜索框,superplaceholder.js-功能强大的超级输入框占位符插件
superplaceholder.js是一款带演示功能的超级输入框占位符JavaScript插件.superplaceholder.js可以让占位文本动起来,它能够周期性的循环显示预定义的文本字符串, ...
- 如何为“选择”框创建占位符?
我正在使用占位符进行文本输入,效果很好. 但是我也想为我的选择框使用一个占位符. 当然,我可以使用以下代码: <select><option value=""&g ...
最新文章
- [CF1042F]Leaf Sets
- 使用python-nmap模块扫描端口脚本
- 最简单的启动Docker实例Mesos Golang Framework
- shell高级编程--引用
- oracle开启日志服务,Oralce 归档日志开启与关闭示例
- 中国象棋程序的设计与实现(五)--回答CSDN读者的一些问题
- 蓝桥杯 ADV-98 算法提高 约数个数
- 使用C语言gets函数和gets_s函数,读取含空格的字符串
- 简单的有监督学习实例——简单线性回归
- mysql 1236错误_MySQL 1236错误解决方法_MySQL
- 【7gyy】教大家设置一个类似手机的锁屏界面
- 使用计算机控制台方法,怎样进入电脑故障恢复控制台 进入电脑故障恢复控制台方法【图文】...
- 图片文件探究1:各种图片文件十六进制的文件头和文件尾
- web前端开发浏览器兼容性 - 持续更新
- FFT专题:IFFT后信号如何重建
- Java API版权第一大案,索赔百亿美元,打了10年终于有结果了!
- 小程序连接低功耗蓝牙
- 简历制作案例分析及制作小技巧总结
- 【Java核心技术卷一】对象与类:使用预定义类与用户自定义类
- 总是想起一首歌:多么痛的领悟
热门文章
- 牛顿求平方根法(输入是double,输出也是double)
- Catterplots包,让你绘制不一样的图
- EPSON机器人SPLE+语言_简单实例
- 远程登录linux进程的状态_Linux实操篇 - 远程登录到Linux系统
- python写数据结构书_有哪些用 Python 语言讲算法和数据结构的书?
- js知识点 掘金_关于webpack4的14个知识点,童叟无欺
- c语言中如何表示矩阵的乘法,c语言矩阵相乘
- asppython份额_2019年7月编程语言榜单公布:Python第一 份额保持较大幅度增长
- python回溯算法_什么是回溯法,Python解法交流?
- oracle乘法运算,oracle实现相乘话语