Сделать желтый автозаполненный прозрачным в Google Chrome

Это текстовое поле

Это текстовое поле, на которое нажимается и содержит текст.

Когда автозаполнение Google chrome захватывает текстовое поле

Я попытался исправить это, вставив этот код

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
}

Но самое лучшее, что я могу получить, чтобы это выглядело, это

Я хочу, чтобы белый ящик был либо прозрачным, либо он мог оставаться белым, но быть меньшим, чтобы он не блокировал ни одну из синих частей текстового поля. Это вообще возможно? Я пробовал погулять, и я ничего не придумал. Или, если у вас есть другие идеи о том, как исправить это, это будет здорово!

Кроме того, если есть способ сделать блок автозаполнения немного меньшим, что тоже будет хорошо, или, возможно, способ переместить ярлык вниз? =/

Я хочу включить автозаполнение.

Ответы

input:-webkit-autofill {
    -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}

input:-webkit-autofill {
   background:rgba(255,255,255,0) !important;
}