input placeholder 在chrome 浏览器自动填充时,…
2018-09-05 07:48:12来源:博客园 阅读 ()
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 会自动填充,并且背景色是黄色,会将原有的图片背景替换掉,用以上方式解决,希望对大家有帮助!。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:微信小程序echarts层级太高
下一篇:前端--CSS
- 常见form表单5种input输入类型 2020-03-29
- HTML5中input新增类型+表单新增属性+其他标签属性 2020-02-01
- 改变input[type=range]的样式 动态滑动 2019-12-26
- HTML连载55-网易注册界面实战之input填充 2019-12-06
- 我的 Input框 不可能这么可爱 2019-12-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash