Gli amanti della documentazione avranno sicuramente notato che nella versione 4.6 di Bootstrap , tra gli esempi della sezione esperimenti si trovava l'utilizzo dello pseudo-element :placeholder-shown per creare un floating label, ossia una textbox con una label con l'effetto placeholder che si rimpiccioliva e si posizionava all'interno del controllo.
Dalla versione 5.0, l'interazione con i componenti è stata migliorata in quanto la transazione della label parte già al click sull'input e sono stati allineati i feedback di validazione. Tutto ciò è possibile utilizzando una sola classe: form-floating.
<div class="form-floating mb-3"> <input type="email" class="form-control" id="email" placeholder="email@email.com"> <label for="email">Email</label> </div>
Analizzando il codice si nota come la label venga posizionata sotto il controllo, questo perchè l'animazione è effettuata utilizzando solo CSS tramite il selettore ~.
La floating label presenta ancora alcuni problemi con i controlli textarea; problemi che il team di Bootstrap si è promesso di risolvere con i prossimi rilasci.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Gestione dell'annidamento delle regole dei layer in CSS
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Recuperare l'ultima versione di una release di GitHub
Disabilitare automaticamente un workflow di GitHub (parte 2)
Paginare i risultati con QuickGrid in Blazor
Configurare e gestire sidecar container in Azure App Service
Managed deployment strategy in Azure DevOps
Miglioramenti nelle performance di Angular 16
La gestione della riconnessione al server di Blazor in .NET 9
Migrare una service connection a workload identity federation in Azure DevOps