4

I want to show @ and password icon in my login fields using a background-image property, inside my input[type="email"] and input[type="password"]. Using this CSS :

input.InputText--icon {
    padding-left: 32px;

    &[type="email"], &[type="email"]:-internal-autofill-selected {
        background-image: url("/ressources/img/email.svg") !important;
    }
    &[type="password"], &[type="password"]:-internal-autofill-selected {
        background-image: url("/ressources/img/password.svg") !important;
    }
}

But if credentials are add using autofilling through Chrome, the following background-image: none !important; property overrides it and I lose my background.

// chrome user agent stylesheet
input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

Do you have any hacky ideas to go through this problem, so that my background-images always shows up. Even if :-internal-autofill-selected event is triggered.

I have seen this idea of using a wrapper (https://stackoverflow.com/a/35573069/7647916 ). But is it possible to do it without using a wrapper ?

Thank you !

p_duthoit
  • 226
  • 4
  • 19
  • 1
    Did you find a solution for this? – Marcos Di Paolo May 07 '20 at 13:46
  • Hello @MarcosDiPaolo no sadly. I used a wrapper finally. But I'm still interested in a solution. – p_duthoit May 07 '20 at 14:35
  • Actually my problem was with background color, i solved it using: `input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { border: 1px solid $borderColor; -webkit-text-fill-color: $color; -webkit-box-shadow: 0 0 0 1000px rgba(15, 63, 81, .3) inset; transition: background-color 5000s ease-in-out 0s; }` – Marcos Di Paolo May 07 '20 at 17:52

0 Answers0