input placeholder 在chrome 浏览器自动填充时,…

2018-09-05 07:48:12来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 1 user-block-name, .user-block-pwd {
 2     margin-bottom: 10%;
 3     text-align: center;
 4     position: relative;
 5 }
 6 
 7     .user-block-name .name, .user-block-pwd .pwd {
 8         width: 66%;
 9         line-height: 18px;
10         /*border-radius: 4px;*/
11         padding: 5px 3px;
12         position: relative;
13         /*padding-left: 35px;*/
14         background-position: 8px 12px;
15         background-size: 15px 15px;
16         background-repeat: no-repeat;
17         font-size: 14px;
18         /*background-color: rgba(0,0,0,0.3);*/
19         background-color: transparent;
20         color: #fff;
21         border-bottom: 1px solid #eaeaea;
22     }
23 
24 /* WebKit browsers */
25         .user-block-name .name::-webkit-input-placeholder,
26         .user-block-pwd .pwd::-webkit-input-placeholder {
27             color: #fff;
28         }
29 
30         /* Mozilla Firefox 4 to 18 */
31         .user-block-name .name:-moz-placeholder,
32         .user-block-pwd .pwd:-moz-placeholder {
33             color: #fff;
34         }
35 
36         /* Mozilla Firefox 19+ */
37         .user-block-name .name::-moz-placeholder,
38         .user-block-pwd .pwd::-moz-placeholder {
39             color: #fff;
40         }
41 
42         /* Internet Explorer 10+ */
43         .user-block-name .name:-ms-input-placeholder,
44         .user-block-pwd .pwd:-ms-input-placeholder {
45             color: #fff;
46         }
47 
48 //图片背景
49 .user-block-name .name {
50         background-image: url('../../images/wx/project/user.png');
51     }
52 .user-block-pwd .pwd {
53         background-image: url('../../images/wx/project/pwd.png');
54     }
55 .user-block-pwd .pwd:-webkit-autofill {
56     -webkit-animation: pwd-fix 1s infinite;
57 }
58 
59 
60 .user-block-name .name:-webkit-autofill {
61     -webkit-animation: user-fix 1s infinite;
62 }
63 
64 @-webkit-keyframes user-fix {
65     from {
66         background-image: url('../../images/wx/project/user.png');
67     }
68 
69     to {
70         background-image: url('../../images/wx/project/user.png');
71     }
72 }
73 
74 @-webkit-keyframes pwd-fix {
75     from {
76         background-image: url('../../images/wx/project/pwd.png');
77     }
78 
79     to {
80         background-image: url('../../images/wx/project/pwd.png');
81     }
82 }

在做登录界面时,需要输入账号 和密码 ,在浏览器中,chrome 会自动填充,并且背景色是黄色,会将原有的图片背景替换掉,用以上方式解决,希望对大家有帮助!。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:微信小程序echarts层级太高

下一篇:前端--CSS