Compilando un form di registrazione o di accesso, capita che il browser ci proponga quello che abbiamo già inserito in precedenza sulla base del nome degli input. L'esempio più lampante lo troviamo quando viene richiesto l'inserimento del nostro indirizzo, con via, paese, cap, nazione: cliccando sul primo campo, un menù a tendina ci presenta la possibilità di inserire dei valori utilizzati in un momento passato.
Una volta che accettiamo l'auto-completamento tutti i campi valorizzati dallo user-agent avranno un colore specifico; nel caso di Chromium troveremo un bordo e un background azzurro.
# stile di default input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important; color: fieldtext !important; }
Questo stile, benchè non invasivo, potrebbe non essere adatto al design della nostra applicazione, oppure è necessario mettere più in evidenza l'azione appena compiuta. In questi casi possiamo utilizzare l'attributo -webkit-autofill ed applicarlo ai vari elementi, siano essi input, textarea, select
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { # bordo input border: 1px solid red; # colore testo -webkit-text-fill-color: red; # sfondo input -webkit-box-shadow: 0 0 0px 1000px yellow inset; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare la command injection in un workflow di GitHub
Utilizzare un service principal per accedere a Azure Container Registry
Routing statico e PreRendering in una Blazor Web App
Evitare il flickering dei componenti nel prerender di Blazor 8
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Eseguire attività con Azure Container Jobs
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare le collection expression in C#