0

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

Community
  • 1
  • 1
Hiral Vadodaria
  • 19,158
  • 5
  • 39
  • 56
  • 1
    Can you provide some sample code for us to work from? Preferably an interactive one such as from JSFiddle or the like? – N.J.Dawson Aug 09 '16 at 07:13
  • Possible duplicate of [Removing input background colour for Chrome autocomplete?](http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete) – R Reveley Aug 09 '16 at 08:08
  • @TheReveller : i specified in question that i don't want the color at all.. not even the white color! – Hiral Vadodaria Aug 09 '16 at 08:25

1 Answers1

4
    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;
    }
Hiral Vadodaria
  • 19,158
  • 5
  • 39
  • 56
jay khatri
  • 151
  • 1
  • 13
  • Thanks. Saved my day! – Hiral Vadodaria Aug 09 '16 at 08:51
  • Well done jay, but would you mind explaining a bit your solution just the rest of the people that finds this answer later could better understand it? – Harald Aug 09 '16 at 08:54
  • @Harald i found it from below link: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ – jay khatri Aug 09 '16 at 09:01
  • @-webkit-keyframes autofill { to { color: #666; background: transparent; } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } – jay khatri Aug 12 '16 at 07:33