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

最新推荐文章于 2024-03-02 15:14:33 发布

chuke5164

最新推荐文章于 2024-03-02 15:14:33 发布

阅读量339

点赞数

文章标签： php

原文链接：https://my.oschina.net/u/4181724/blog/3089694

版权

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=20kjaa&title=input+placeholder+%E5%9C%A8chrome+%E6%B5%8F%E8%A7%88%E5%99%A8%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85%E6%97%B6%EF%BC%8C%E8%83%8C%E6%99%AF%E8%89%B2%E8%A6%86%E7%9B%96%E5%8E%9F%E6%9C%89%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E9%97%AE%E9%A2%98%E3%80%82

 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 }