input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。
程序员文章站
2022-07-02 13:56:17
在做登录界面时,需要输入账号 和密码 ,在浏览器中,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 会自动填充,并且背景色是黄色,会将原有的图片背景替换掉,用以上方式解决,希望对大家有帮助!。
上一篇: PS如何清除掉图片上的文字?