Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

Luluiny

Luluiny commented on May 13, 2019

@Luluiny

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

tiezhu92

tiezhu92 commented on May 13, 2019

@tiezhu92

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

xiangshuo1992

xiangshuo1992 commented on May 14, 2019

@xiangshuo1992
Contributor

倒是一直没注意过这个问题,搜了下思否已经有提问和回答,基本也能解决问题,包括上面的两个回答,同时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

tzjoke commented on May 28, 2019

@tzjoke

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

demo

kokokele

kokokele commented on Jul 15, 2019

@kokokele

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

haizhilin2013

haizhilin2013 commented on Jul 15, 2019

@haizhilin2013
CollaboratorAuthor

@kokokele 这并不是考题。

diandianzd

diandianzd commented on Nov 2, 2019

@diandianzd
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

blueRoach commented on Jun 24, 2020

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

smile-2008 commented on Sep 28, 2020

@smile-2008

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

Iambecauseyouare

Iambecauseyouare commented on Mar 12, 2023

@Iambecauseyouare

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @kokokele@smile-2008@haizhilin2013@xiangshuo1992@blueRoach

        Issue actions

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