CSS自适应的占位符效果
一种不错的自适应input效果,分享一下。 html section :
<div style="width:500px;height:500px;margin:300px auto;border: 1px solid red;">
<form style="width: 280px; height: 500px; margin:1em auto;">
<input required='' type='text'/>
<label alt='请输入旧密码' placeholder='请输入旧密码'></label>
<input required='' type='text'/>
<label alt='请输入新密码' placeholder='请输入新密码'></label>
<input required='' type='text'/>
<label alt='请确认新密码' placeholder='请确认新密码'></label>
</form>
</div>
style section :
input[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: 0 0 10px;
padding: 12px;
border: 1px solid #cccccc;
border-radius: 5px;
background: #fff;
resize: none;
outline: none;
}
input[type="text"][required]:focus {
box-shadow: 1px 1px 5px #444;
-webkit-transition-duration: .2s;
transition-duration: .2s;
pointer-events: none;
}
input[type="text"][required]:focus + label[placeholder]:before {
color: #000;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate(-110px,10px) scale(0.9, 0.9);
/*-ms-transform: translate(-110px,10px) scale(0.8, 0.8);*/
transform: translate(-110px,10px) scale(0.9, 0.9);
color: #00FFFF;
/*字体缩放*/
}
input[type="text"][required]:invalid + label[placeholder][alt]:before {
content: attr(alt);
}
input[type="text"][required] + label[placeholder] {
display: block;
pointer-events: none;
line-height: 36px;
/*placeholder position*/
margin-top: -webkit-calc(-48px - 2px);
margin-top: calc(-48px - 2px);
margin-bottom: -webkit-calc((40px - 10px) + 2px);
margin-bottom: calc((40px - 10px) + 2px);
}
input[type="text"][required] + label[placeholder]:before {
content: attr(placeholder);
display: inline-block;
margin: 0 -webkit-calc(1em + 2px);
margin: 0 calc(10px + 2px);
padding: 0 2px;
color: #898989;
white-space: nowrap;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-background-size: 100% 5px;
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;
}
效果图 :
但是IE不兼容,具体效果可以自己测试一下,当鼠标点击input时占位符是淡出去的效果。
CSS自适应的占位符效果的更多相关文章
- Adaptive Placeholder – 自适应的占位符效果
在早期,我们都是通过使用 JavaScript 来实现占位符功能.而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能.这里向大家分享一个自适应的占位符 ...
- css实现简单音乐符效果
css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 <!DOCTYPE html> <html lang="en&qu ...
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- [Sass]占位符 %placeholder
[Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余 ...
- Sass占位符选择器`%`
摘录自Understanding placeholder selectors. @extend @extend让你能够在多个选择器中通过继承的方式共享一段样式: .icon { transition: ...
- sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点
初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...
- sass中的占位符%,@extend,@mixin(@include)的编译区别和使用场景
对于下面同一段css,它们的编译效率是不同的. 1.使用@extend:基础类icon会出现在编译后的css文件中,即使它可能只是拿来被继承,而不是作为icon这个class单独使用 //基础类ico ...
- Sass--混合宏 VS 继承 VS 占位符
什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同 ...
- .NET 基础 一步步 一幕幕[运算符、占位符、转义符]
运算符.占位符.转义符 好吧,在五局全胜之后,终于升到了三个钻,距离一个星星还有一大段距离,忽然想起来今天的博客还没写,果断坑队友,来写博客了....感觉以后还是每天更新一篇比较好.要不晚上就该熬 ...
随机推荐
- 学习SpringMVC中优秀的代码编写风格
在org.springframework.web.servlet.FrameworkServlet 中有下面这段代码 private class ContextRefreshListener impl ...
- 响应式网站-全屏banner响应的2中方法 - 被吃掉的banner
通常来讲, 设计师们喜欢把banner设计成全屏(1920px或以上) 主题内容控制在一定的范围内一般在1200px左右 这样的设计即可以在宽屏上的表现很好.也能向下兼容一些小屏幕的设备: 如下图(所 ...
- html学习笔记 - 特殊字符
- 开涛spring3(6.7) - AOP 之 6.7 通知顺序
如果我们有多个通知想要在同一连接点执行,那执行顺序如何确定呢?Spring AOP使用AspectJ的优先级规则来确定通知执行顺序.总共有两种情况:同一切面中通知执行顺序.不同切面中的通知执行顺序. ...
- 多线程之Parallel类
Parallel类是对线程的一个抽象.该类位于System.Threading.Tasks名称空间中,提供了数据和任务并行性. Paraller类定义了数据并行地For和ForEach的静态方法,以及 ...
- stickUp.js:98 Uncaught ReferenceError: vartop is not defined at HTMLDocument.<anonymous> (stickUp.js:98)
附加var vartop = 0;在var topMargin = 0;这之后,这里是我附加的代码:$(document).ready(function(){ var contentButton = ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- activeMQ的简单介绍
1.什么叫activeMQ? ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现 ...
- Java IO流之内存流
内存流 1)内存流主要用来操作内存 2)分类 ByteArrayInputStream 主要完成将内容从内存读入程序之中 ByteArrayOutputStream 主要是将数据写入到内存中. 3)输 ...
- Java 9 揭秘(3. 创建你的第一个模块)
文 by / 林本托 Tips 做一个终身学习的人. 在这个章节中,主要介绍以下内容: 如何编写模块化的Java程序 如何编译模块化程序 如何将模块的项目打包成模块化的JAR文件 如何运行模块化程序 ...