Hiral Hiral - 3 months ago 50
CSS Question

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

Answer
    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

Comments