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


 







            

            
posted @ 
2017-05-04 10:08 
cat糯米团 
阅读(2857) 
评论(0) 
编辑 
收藏 
举报