我正在设计一个Web应用程序,一般的风格涉及黑色背景上的白色文本.
这种风格包括使用自定义(黑色)图像进行用户名和密码字段的白色文本.
如果用户使用google chrome登录并选择保存其表单的登录详细信息,则在下次访问时,用户名和密码字段将以浅黄色显示白色文本,几乎不可能读取.这看起来真的很糟糕
如何覆盖此样式,防止Google Chrome更改保存的用户名和密码字段的背景.
- <style type="text/css">
- input {
- border: none;
- background: url('darkinput.png');
- color: #fff;
- }
- </style>
- <input type="text" name="email" id="text" />
- <input type="password" name="password" id="text" />
编辑：目前(google-chrome v11.0.696.57)用户代理样式表包含！重要覆盖设置以下两个：
- input:-webkit-autofill{
- background-color: rgb(250,255,189) !important;
- background-image: none !important;
- }
在下面的网址上有一个问题报告,我鼓励每个读这个的人投票支持：
解决方法
要完全禁用自动完成(并因此删除样式问题),您可以尝试：
- <form autocomplete="off">
- ...
- </form>
然而,另一种可能性是在页面加载后使用jQuery来删除样式.
- if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
- $(window).load(function(){
- $('input:-webkit-autofill').each(function(){
- var text = $(this).val();
- var name = $(this).attr('name');
- $(this).after(this.outerHTML).remove();
- $('input[name=' + name + ']').val(text);
- });
- });}
