Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第27天 怎样修改chrome记住密码后自动填充表单的黄色背景? #95

Open
haizhilin2013 opened this issue May 12, 2019 · 10 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第27天 怎样修改chrome记住密码后自动填充表单的黄色背景?

@haizhilin2013 haizhilin2013 added the css css label May 12, 2019
@Luluiny
Copy link

Luluiny commented May 13, 2019

设置表单属性 autocomplete="off" 或者改变背景颜色为白色或透明

@tiezhu92
Copy link

input:-webkit-autofill {
-webkit-box-shadow: 0 0 3px 100px #eee inset; //改变填充背景色
}

@xiangshuo1992
Copy link
Contributor

xiangshuo1992 commented May 14, 2019

倒是一直没注意过这个问题,搜了下思否已经有提问和回答,基本也能解决问题,包括上面的两个回答,同时CSDN的账号登录也是用上面内阴影的方法解决的。
https://segmentfault.com/q/1010000000671971

以下才是重点:
都提到了Chrome有默认样式,说“除了chrome默认定义的background-color,background-image,color不能用 !important 提升其优先级以外,其他的属性均可使用!important提升其优先级。”
可是这是为什么啊?

原来重置样式是这样的:

input:-webkit-autofill-strong-password {
    -webkit-text-security: none !important;
    -webkit-user-select: none !important;
    cursor: default !important;
    font-family: monospace;
}

input:-webkit-autofill, input:-webkit-autofill-strong-password {
    background-color: #FAFFBD !important;
    background-image: none !important;
    color: #000000 !important;
}

都加上了important,后面当然没办法重置啦,Chrome也是够横的。

webkit 内核浏览器,默认样式:http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

全文关于autofill 的就这两条,所以严肃质疑网上给出的默认样式:
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill,不靠谱!

@tzjoke
Copy link

tzjoke commented May 28, 2019

-webkit-text-fill-color 设置文本颜色,-webkit-box-shadow inset设置填充

demo

@kokokele
Copy link

这都是考题??????没有这种需求的根本无法回答。

@haizhilin2013
Copy link
Collaborator Author

@kokokele 这并不是考题。

@diandianzd
Copy link

input{
    &:-webkit-autofill {
      box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset !important;
      -webkit-text-fill-color: #000 !important;
      transition: background-color 5000s ease-in-out 0s;
      font-size: 14px;

    }
  }

@blueRoach
Copy link

input{
    &:-webkit-autofill {
      box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset !important;
      -webkit-text-fill-color: #000 !important;
    }
  }

@MrZ2019
Copy link

MrZ2019 commented Sep 28, 2020

-webkit-text-fill-color 设置文本颜色,-webkit-box-shadow inset设置填充

@Iambecauseyouare
Copy link

将forn标签的autocomplete设置为off或将背景颜色改为transparent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

10 participants