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时占位符是淡出去的效果。