Make autocomplete input transparent in google chrome

Question

Before reading, note THIS IS NOT A DUPLICATE, why ? Because the answer never had the GOOD answer, the answer we need.

So, what we basically want to do, is make a input transparent, like this:

A example of transparent background in a input

This is beautiful, right ? Well, now look at that :

A not beautiful input at all

That just look... horrible. Is there any way around this ?

The following thing does NOT work :

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

An idea ?

Sorry, those things don't work inside a browser-specific selector — Tijl Van den Brugghen, Jun 20 '15 at 17:30
I like the solution in this question by Jason http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background — user2867288, Jun 20 '15 at 18:37

score 0 · Answer 1 · answered Jun 20 '15 at 20:25

0

That's the webkit autofill

 input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; 
}

change the white to whatever you want.

Also - if you want to change the text color it's :

 -webkit-text-fill-color: yourColor !important;

If you do not want to use this solution, you can use something like this

input {
    background-color: red !important;
 }

But mostly the suggestion is to use

 input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; 
 }

answered Jun 20 '15 at 20:25

ajmajmajma

Hello, i am not marking this question as OK since it does not make the input transparent :) – Tijl Van den Brugghen Jun 21 '15 at 17:43
@TijlVandenBrugghen input:-webkit-autofill { color: rgba(255, 255, 255, 0.3) !important; } – ajmajmajma Jun 21 '15 at 18:51

1 Answers1