Cuando se completa automáticamente, mis elementos de entrada tienen un estilo predeterminado del navegador que quiero cambiar. Sin embargo, todos los estilos del navegador usan !important y parece que no puedo anularlos, incluso con un selector más específico que también usa !important . Creo que los estilos exactos que están causando el problema son estos:
Captura de pantalla de estilos de herramientas de desarrollo
¿Hay alguna forma de anularlos , ya sea con CSS o JavaScript? Estoy seguro de que he visto elementos de entrada con estilos de autorelleno personalizados antes. En caso de que sea importante, aunque quiero que la anulación funcione en todos los navegadores de todos modos, actualmente estoy usando Brave, que se ejecuta en Chromium, por lo que los selectores, etc., deberían ser los mismos que funcionan para Chrome.
No necesita Javascript para resolver esto y, como regla general, debe usar la menor cantidad posible de JS para manipular su CSS,
puede usar el pseudo-selector -webkit-autofill para apuntar a esos campos y diseñarlos como mejor le parezca. El estilo predeterminado solo afecta el color de fondo, pero la mayoría de las demás propiedades se aplican aquí, como el borde y font-size . Incluso puede cambiar el color del texto usando -webkit-text-fill-colour , que se incluye en el fragmento a continuación.
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 { border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; }** tenga en cuenta que este fragmento es solo un ejemplo que tenía a mano; ¡Puedes usarlo de muchas maneras! **