El autofill es el estado que aplica el navegador cuando completa automáticamente un campo (por ejemplo, al sugerir un correo o una contraseña guardada). Este mixin te permite controlar el color de fondo y el color del texto en ese estado para mantener consistencia con tu UI.
@mixin autofill($attr: (
bg: initial,
color: initial,
padding: null,
border: null
);
| Clave | Tipo | Default | Descripción |
|---|---|---|---|
| bg | Color | initial | Define el color de fondo aplicado al estado autofill. |
| color | c | Color | initial | Define el color del texto aplicado al estado autofill. |
| padding | p | Medida | null | Define un padding opcional para el estado autofill. |
| border | b | Border | null | Define un borde opcional para el estado autofill. |
Nota: En este ejemplo el input usa el mixin con $c4 como fondo y $c5 como color de texto. Para ver el efecto, escribe en el input y usa una sugerencia del navegador, o guarda un valor y vuelve a cargar la página.
<input class="input_autofill" type="email" name="email" autocomplete="email" />