在这里您可以使用任何颜色,例 white , #DDD , rgba(102, 163, 177, 0.45) .
但 transparent 在这里不起作用 .
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset;
}
此外,您可以使用它来更改文本颜色:
/*Change text in autofill textbox*/
input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
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);
});
});}
3
除此之外:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
}
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
(function($){
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$('input, select').on('change focus', function (e) {
setTimeout(function () {
$.each(
document.querySelectorAll('*:-webkit-autofill'),
function () {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
updateActions();
})
}, 300)
}).change();
}
var updateActions = function(){};// method for update input actions
updateActions(); // start on load and on rebuild
})(jQuery)
*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
/* use animation hack, if you have hard styled input */
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
/* if input has one color, and didn't have bg-image use shadow */
-webkit-box-shadow: 0 0 0 1000px #fff inset;
/* text color */
-webkit-text-fill-color: #fff;
/* font weigth */
font-weight: 300!important;
}
Google Chrome用户代理会阻止开发人员 CSS ,因此要更改 autofill ,UI必须使用以下其他属性:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
/*use inset box-shadow to cover background-color*/
-webkit-text-fill-color: #ffa400 !important;
/*use text fill color to cover font color*/
}
30 回答
我遇到了一个无法使用box-shadow的问题,因为我需要输入字段是透明的 . 这是一个黑客但纯CSS . 将过渡设置为很长的时间 .
这很好用,您可以更改输入框样式以及输入框内的文本样式:
在这里您可以使用任何颜色,例
white
,#DDD
,rgba(102, 163, 177, 0.45)
.但
transparent
在这里不起作用 .此外,您可以使用它来更改文本颜色:
Advice: 不要使用数百或数千的过多模糊半径 . 这没有任何好处,可能会使处理器负载较弱的移动设备 . (对于实际的外部阴影也是如此) . 对于20px高度的普通输入框,30px'模糊半径'将完美覆盖它 .
我有一个更好的解决方案 .
将背景设置为下面的另一种颜色并没有解决我的问题,因为我需要一个透明的输入字段
所以我尝试了其他一些东西,我想出了这个:
之前添加框阴影的解决方案适用于需要纯色背景的人 . 添加转换的另一种解决方案是有效的,但是必须设置持续时间/延迟将意味着在某些时候它可能再次显示 .
我的解决方案是使用关键帧,这样它将始终显示您选择的颜色 .
这是我的解决方案,我使用了转换和转换延迟,因此我可以在输入字段上使用透明背景 .
这是设计的,因为这种着色行为来自WebKit . 它允许用户了解已预先填充的数据 . Bug 1334
您可以通过执行(或在特定的表单控件上)关闭自动完成功能:
或者您可以通过执行以下操作来更改自动填充的颜色:
请注意,有一个错误被跟踪,以便再次使用:http://code.google.com/p/chromium/issues/detail?id=46543
这是一个WebKit行为 .
目前可能的解决方法是设置一个“强大的”内部阴影:
试试隐藏自动填充样式
所有上述答案都有效,但确实存在缺陷 . 下面的代码是上述两个答案的合并,完美无缺,没有眨眼 .
上海社会科学院
经过2个小时的搜索似乎谷歌仍然以某种方式覆盖黄色,但我为它修复了它 . 那就对了 . 它也适用于悬停,焦点等 . 你所要做的就是添加!重要的是它 .
这将完全删除输入字段中的黄色
如果您想保持自动完成功能不变,可以使用一些jQuery来删除Chrome的样式 . 我在这里写了一篇简短的帖子:http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
除此之外:
您可能还想添加
另外,当你点击输入时,黄色会回来 . 对于焦点,如果你使用bootstrap,第二部分用于边框高亮0 0 8px rgba(82,168,236,0.6);
这样看起来就像任何bootstrap输入 .
我使用没有JQuery的JavaScript开发了另一个解决方案 . 如果您发现这有用或决定重新发布我的解决方案,我只要求您提供我的姓名 . 请享用 . - 丹尼尔费尔韦瑟
此代码基于以下事实:只要输入了其他文本,Google Chrome就会删除Webkit样式 . 仅仅更改输入字段值是不够的,Chrome想要一个事件 . 通过关注每个输入字段(文本,密码),我们可以发送键盘事件(字母'a'),然后将文本值设置为它的先前状态(自动填充的文本) . 请记住,此代码将在每个浏览器中运行,并将检查网页中的每个输入字段,并根据您的需要进行调整 .
试试这个:与上面的@ Nathan-white回答相同,只需稍作调整即可 .
添加一个小时的延迟会暂停输入元素上的任何css更改 .
这比使用过渡动画或内部阴影更好 .
对于那些使用指南针的人:
我有一个解决方案,如果你想阻止谷歌浏览器的自动填充,但它有点“弯刀”,只需删除谷歌铬添加到这些输入字段的类,并将值设置为“”如果你不需要显示加载后存储数据 .
Daniel Fairweather的解决方案(Removing input background colour for Chrome autocomplete?)(我很乐意upvote他的解决方案,但仍然需要15代表工作真的很好 . 最受欢迎的解决方案存在巨大差异:您可以保留背景图像!但稍加修改(只需Chrome检查)
你需要记住, it ONLY works on visible fields !
因此,如果您对表单使用$ .show(),则需要在show()事件之后运行此代码
我的完整解决方案(我有登录表单的显示/隐藏按钮):
对不起,我希望它是一个评论 .
如果你愿意,我可以链接到我使用它的网站 .
我有一个使用CSS过滤器的纯CSS解决方案 .
灰度滤镜将黄色替换为灰色,然后亮度将灰色移除 .
SEE CODEPEN
谢谢本杰明!
Mootools解决方案有点棘手,因为我无法使用
$('input:-webkit-autofill')
来获取字段,所以我使用的是以下内容:我放弃!
由于无法使用自动完成功能更改输入的颜色,因此我决定使用jQuery for webkit浏览器禁用所有这些颜色 . 像这样:
没有一个解决方案适合我,插入阴影对我不起作用,因为输入的半透明背景覆盖在页面背景上 .
所以我问自己,“Chrome如何确定在给定页面上自动填充的内容?”
“它是否寻找输入ID,输入名称?表单ID?表单操作?”
通过我对用户名和密码输入的实验,我发现只有两种方法会导致Chrome无法找到应自动填充的字段:
1)将密码输入放在文本输入之前 . 2)给他们相同的名字和身份......或者根本没有姓名和身份证明 .
页面加载后,使用javascript,您可以动态更改页面上输入的顺序,或者动态地为它们指定名称和ID ...
而且Chrome不知道是什么打中了它...自动完成功能被破坏了!
疯了,我知道 . 但它对我有用 .
Chrome 34.0.1847.116,OSX 10.7.5
遗憾的是,2016年上述解决方案没有一个适用于我(问题后几年)
所以这是我使用的积极解决方案:
基本上,它在保存值时删除标记,然后重新创建它,然后放回值 .
这适用于输入,textarea和正常,悬停,焦点和活动状态中的选择 .
以下是适用于SASS / SCSS的上述解决方案的SCSS版本 .
如前所述,inset -webkit-box-shadow对我来说效果最好 .
还有代码片段来更改文字颜色:
这家伙有一个great solution使用JS并且工作得很好 .
这是完成此任务的复杂解决方案 .
简单,只需添加,
到密码字段 .
Google Chrome用户代理会阻止开发人员
CSS
,因此要更改autofill
,UI必须使用以下其他属性: