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

Posted kitty-blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。相关的知识,希望对你有一定的参考价值。

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

以上是关于input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。的主要内容,如果未能解决你的问题,请参考以下文章

改变input的placeholder字体颜色

input标签placeholder过长省略号显示

设置input placeholder的样式

input 框的 placeholder 另类实现

placeholder的兼容处理

placeholder的兼容处理