谷歌浏览器自动填充功能怎么用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谷歌浏览器自动填充功能怎么用相关的知识,希望对你有一定的参考价值。
参考技术A 方法如下:1、启动 Chrome 浏览器,然后点击右上角的扳手图标设置;
2、在设置页面中选择个人资料;
3、勾选自动填充中的启用自动填充功能后,只需点击一次即可填写多个网络表单复选框;
4、点击管理自动填充设置,分别点击添加新地址和添加新信用卡,预设好这些数据信用卡;
5、完成之后,点击确定。
谷歌浏览器自动填充删除背景图片
【中文标题】谷歌浏览器自动填充删除背景图片【英文标题】:Google Chrome autofill removing background image 【发布时间】:2014-02-19 13:28:05 【问题描述】:当我在邮箱中写邮件时,我没有问题并且完美显示。 但是当谷歌浏览器决定自动填充时,左边的图像被删除了。 http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg
我已经阅读了一些关于破解黄色背景的主题,这很有效,但图像继续消失。
input:-webkit-autofill
-webkit-box-shadow: 0 0 0 1000px white inset;
// html
<input type='email' class='email' placeholder='email'/>
// css
.email
background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
background-repeat: no-repeat;
padding-left: 35px;
http://jsfiddle.net/9AM6X/> 示例,但没有显示错误,因为我无法在 jsfiddle 中复制 chrome 的自动填充。
【问题讨论】:
为什么不试试input:-webkit-autofill, .email \* existing .email styles *\
这不是我的答案。仍然希望它可以帮助***.com/questions/2920306/… [1]:***.com/questions/2920306/…
你有没有设法找到答案?
@blueprintChris 是的,人造元素是可能的。
【参考方案1】:
我找到了另一个解决方案,它应该使用 JavaScript 来解决问题。将 onchange 添加到您的输入元素,并使用以下功能。我将它与 CSS 规则 input:focus:invalid 和 input:required:valid 一起使用,以根据输入是否有效显示不同的背景图像。
适用于 Chrome 和 Firefox,但似乎不适用于 Safari :(
CSS:
input:required:valid
background: url("IMAGE_PATH_HERE") no-repeat right;
background-size: 25px;
border: 3px solid green;
input:focus:invalid
background: url("IMAGE_PATH_HERE") no-repeat right;
background-size: 25px;
border: 3px solid red;
HTML:
<input type="text" name="name" id="name" autocomplete="name" onchange="fixAuto(this)" required>
JavaScript:
/**
* Adds background image to input fields if they are removed by the browser.
*
* @param element An input HTML element.
*/
function fixAuto(element)
setTimeout(() =>
// Store the current value of the input field
let value = element.value;
// Store the element itself
let input = document.getElementById(element.id);
// Change the input fields value
input.value = value;
, 0);
【讨论】:
【参考方案2】:使用动画解决这个问题是最有用的方法!
感谢@wkille 的回答:https://***.com/a/51874418/11720087
你可以这样设置动画:
@keyframes clearAutofill
to background: 'Your-code';
/* e.g background: url('./img/example.png') 0 0 no-repeat #fff; */
input:-webkit-autofill
animation: clearAutofill forwards;
/* 'animation-fill-mode: forwards' can keep the style you set. */
【讨论】:
【参考方案3】:您只需将autocomplete="off"
添加到您的输入字段即可解决问题。我试过了,效果很好。
【讨论】:
【参考方案4】:使用关键帧放回图像:
@-webkit-keyframes autofill
to
background-image:url(images/your-input-bg-image.svg);
input:-webkit-autofill
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
感谢@Steve 对Removing input background colour for Chrome autocomplete?的回答
【讨论】:
这对我不起作用! :(【参考方案5】:为文本框使用背景图像是非常不方便的做法。您可以更改您的 HTML 标记
html
<div class='icon'></div>
<input type='email' class='email' placeholder='email'/>
css
.email
border:1px solid black;
padding-left: 5px;
float:left;
border-left:none;
outline:none ;
margin-left:-3px
.icon
background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
background-repeat: no-repeat;
background-position:center center ;
float:left;
width:30px;
height:18px;
margin-top:2px;
border:1px solid black;
border-right:none
我已更新代码:jsFiddle
【讨论】:
【参考方案6】:我在这里发布了一个解决方案,本质上是作为所描述问题的破解/解决方法。
使用额外的元素,我们可以将图标放在输入元素上。
预览w:http://output.jsbin.com/necigedago
工作示例:
CSS
.control
position: relative;
.email
padding-left: 35px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 16px;
.email ~ .input-icon
background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
width: 22px;
height: 14px;
position: absolute;
left: 8px;
bottom: 0;
top: 0;
margin: auto;
HTML
<p class='control'>
<input type='email' class='email' placeholder='email'/>
<span class='input-icon'></span>
</p>
【讨论】:
【参考方案7】:我找到了更好的解决方案。
对于新的 Chrome 版本,您只需在密码字段中输入 autocomplete="new-password"
即可。我已经检查过了,工作正常。
【讨论】:
【参考方案8】:唯一的选择是删除背景图像在 webkit 中的填充,但您可以这样设置样式:
/* CHROME ISSUE W/ YELLOW BG */
input:-webkit-autofill#username,
input:-webkit-autofill#usernameId_new,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
-webkit-text-fill-color: #646464 !important;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
-webkit-padding-start: 8px !important;
该图像仍然适用于 IE、FF 等...但对于 chrome 将覆盖。
最好的-
【讨论】:
以上是关于谷歌浏览器自动填充功能怎么用的主要内容,如果未能解决你的问题,请参考以下文章