当前位置： 移动技术网 > IT编程>网页制作>CSS > input placeholder 在chrome 浏览器自动填充时，背景色覆盖原有背景图片问题。

input placeholder 在chrome 浏览器自动填充时，背景色覆盖原有背景图片问题。

2018年09月05日  | 移动技术网IT编程  | 我要评论

热电偶传感器,末日红颜赋,战国骁刃dullahun

 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 会自动填充，并且背景色是黄色，会将原有的图片背景替换掉，用以上方式解决，希望对大家有帮助！。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网