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

番茄西红柿发布于2019-04-23 13:25 / 1818人阅读

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

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

超融合服务器私有云背景色切换背景色外层背景色网页背景色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1852.html

【CSS练习】IT修真院--练习4-移动端界面

摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一任务四、一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求：header扩展性 & 顶栏固定进行p...

kun_jian 2019-08-29 15:39 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

honhon 2019-08-21 10:51 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

Little_XM 2019-08-30 13:07 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

Coding01 2019-08-05 17:49 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

shiyang6017 2019-08-01 15:21 评论0 收藏0