一种不错的自适应input效果，分享一下。
html section :
1 <div style="500px;height:500px;margin:300px auto;border: 1px solid red;"> 2 <form style=" 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时占位符是淡出去的效果。