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 ...
最新文章
- boost::coroutine模块实现power的测试程序
- 牛客题霸 [二叉树的最大深度]C++题解/答案
- php 内容编码错误,PHP输出缓冲,ob_gzhandler引起的内容编码错误?
- nginx fastcgi python_webpy + nginx + fastcgi 构建python应用
- java可变字符串替换字符,我们如何替换Java中String和StringBuffer的特定部分?
- ros如何订阅关节力矩信息_ROS中阶笔记(二):机器人系统设计—URDF机器人建模...
- windows mysql备份与恢复_windows下Mysql自动备份与恢复说明
- 《高效能程序员的修炼》——程序员的八种境界
- MAC安装apache tomcat配置方法图文教程
- 最新GitHub新手使用教程(Windows Git从安装到使用)——详细图解
- 引物设计-Primer6.0
- Mac: Mac 截长屏
- 计算机系统时间错了,电脑时间同步出错怎么办
- 计算机限制无法压缩,电脑上文件夹压缩不了怎么办
- 苹果电子邮件怎么注册_电子邮件地址怎么写
- Java拿到前一天的零点零分
- QGis二次开发:预览几何图形,QgsRubberBand的应用
- Android O、N版本修改dex2oat编译选项,减少占用ROM空间或者加快安装速度
- 什么是ISO 21434?给汽车软件开发人员的合规贴士
- 牛市回归,MATIC再创历史新高,马蹄ETF基金两周大涨152%
热门文章
- xp系统的计算机管理中用户在哪里,XP系统设备管理器中一片空白怎么修复?
- java focuslistene_Java:FocusListener接口
- js轮询导致服务器瘫痪_演进:Tengine 从 Web 代理服务器 到 分布式推送服务器
- redis api java 正则_java代码怎么正则删除redis的数据
- java user.dir 设置_使用java系统属性user.dir读取配置文件
- java实现筛选_教你用Java web实现多条件过滤功能
- dommel mysql_.Net Core AA.FrameWork应用框架介绍
- C#中throw抛出异常后,后续代码执行情况
- mysql行转列和列转行_mysql 行转列和列转行实例详解
- sqlplus可以连接plsql连接不上_为什么有的iPhone/iPad连接不上电脑?