一种不错的自适应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自适应的占位符效果的更多相关文章

  1. Adaptive Placeholder – 自适应的占位符效果

    在早期,我们都是通过使用 JavaScript 来实现占位符功能.而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能.这里向大家分享一个自适应的占位符 ...

  2. css实现简单音乐符效果

    css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 <!DOCTYPE html> <html lang="en&qu ...

  3. css编译工具Sass中混合宏,继承,占位符分别在什么时候使用

    //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...

  4. [Sass]占位符 %placeholder

    [Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余 ...

  5. Sass占位符选择器`%`

    摘录自Understanding placeholder selectors. @extend @extend让你能够在多个选择器中通过继承的方式共享一段样式: .icon { transition: ...

  6. sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...

  7. sass中的占位符%,@extend,@mixin(@include)的编译区别和使用场景

    对于下面同一段css,它们的编译效率是不同的. 1.使用@extend:基础类icon会出现在编译后的css文件中,即使它可能只是拿来被继承,而不是作为icon这个class单独使用 //基础类ico ...

  8. Sass--混合宏 VS 继承 VS 占位符

    什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同 ...

  9. .NET 基础 一步步 一幕幕[运算符、占位符、转义符]

      运算符.占位符.转义符 好吧,在五局全胜之后,终于升到了三个钻,距离一个星星还有一大段距离,忽然想起来今天的博客还没写,果断坑队友,来写博客了....感觉以后还是每天更新一篇比较好.要不晚上就该熬 ...

随机推荐

  1. 学习SpringMVC中优秀的代码编写风格

    在org.springframework.web.servlet.FrameworkServlet 中有下面这段代码 private class ContextRefreshListener impl ...

  2. 响应式网站-全屏banner响应的2中方法 - 被吃掉的banner

    通常来讲, 设计师们喜欢把banner设计成全屏(1920px或以上) 主题内容控制在一定的范围内一般在1200px左右 这样的设计即可以在宽屏上的表现很好.也能向下兼容一些小屏幕的设备: 如下图(所 ...

  3. html学习笔记 - 特殊字符

  4. 开涛spring3(6.7) - AOP 之 6.7 通知顺序

    如果我们有多个通知想要在同一连接点执行,那执行顺序如何确定呢?Spring AOP使用AspectJ的优先级规则来确定通知执行顺序.总共有两种情况:同一切面中通知执行顺序.不同切面中的通知执行顺序. ...

  5. 多线程之Parallel类

    Parallel类是对线程的一个抽象.该类位于System.Threading.Tasks名称空间中,提供了数据和任务并行性. Paraller类定义了数据并行地For和ForEach的静态方法,以及 ...

  6. 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 = ...

  7. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  8. activeMQ的简单介绍

    1.什么叫activeMQ? ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现 ...

  9. Java IO流之内存流

    内存流 1)内存流主要用来操作内存 2)分类 ByteArrayInputStream 主要完成将内容从内存读入程序之中 ByteArrayOutputStream 主要是将数据写入到内存中. 3)输 ...

  10. Java 9 揭秘(3. 创建你的第一个模块)

    文 by / 林本托 Tips 做一个终身学习的人. 在这个章节中,主要介绍以下内容: 如何编写模块化的Java程序 如何编译模块化程序 如何将模块的项目打包成模块化的JAR文件 如何运行模块化程序 ...