CODEWITHSUNDEEP
htmlcssgoogle-chrome
Hiral Vadodaria
Hiral Vadodaria

Reputation: 19250

Chrome : user agent stylesheet turn off for transparent background

I came across few of the similar questions like:

Override browser form-filling and input highlighting with HTML/CSS and chrome : how to turn off user agent stylesheet settings?

But unfortunately, nothing helped me solving my issue.

I have a got a webpage where I have set background of all the input to transparent.

In chrome, due to user agent stylesheet, it keeps the yellow background and i can't set it to be white or some other color. Neither I can turn off from dev settings as user won't be aware of the same.

I need a css or jquery solution for this.

Please help.

Update - 1

https://jsfiddle.net/hiralvadodaria/8b7a4o23/21/

used this CSS with no luck:

    input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    background:none !important;
    background-color: rgb(0,0,0,0) !important;

    background-image: none !important;
    color: rgb(0, 0, 0);
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

here is the fiddle. but i am not able to save the username/password there and hence not able to show up the exact issue.

find an image from my project instead.

enter image description here

Upvotes: 0

Views: 4511

Answers (1)

jay khatri
jay khatri

Reputation: 149

    input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

Try this

Update

if the code above doesn't work for you for some reason, here is another one:

@-webkit-keyframes autofill {
        to {
            color: #fff;
            background: transparent;
        }
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-animation-name: autofill;
        -webkit-animation-fill-mode: both;
    }

Upvotes: 4

Related Questions