Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I remove the styles from the pseudo element -internal-input-suggested?

As of the version 76.0.3809.100 of Google Chrome, I have a new pseudo element to autocomplete the inputs. I want the autocomplete function but I need remove the styles by default.

<div pseudo="-internal-input-suggested" id="placeholder" style="display: block 
 !important;">
    [email protected]
</div>

Styles applied by default on Chrome:

input::-internal-input-suggested, textarea::-internal-input-suggested {
    font: 400 13.3333px Arial !important;
}

I'm trying overwrite with the same input::-internal-input-suggested, textarea::-internal-input-suggested on my css but I can not.

like image 958
Carlos Tenorio Pérez Avatar asked Oct 15 '22 12:10

Carlos Tenorio Pérez


1 Answers

Carlos. This is Chrome bug #991157, #953689 with status WontFix.

The workaround I found is using :-webkit-autofill and :-webkit-autofill:first-line

input:-webkit-autofill,
input:-webkit-autofill:first-line {
    font-size: initial;
    line-height: inherit;
    /* font-family: font name; */
}
like image 162
Binyamin Avatar answered Oct 31 '22 17:10

Binyamin