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
Impostare automaticamente l'altezza del font tramite CSS
Usare il metodo nameof con un tipo generico in C# 14
Creare un extension method per applicare condizionalmente una Where in una query LINQ per Entity Framework
Ottimizzare i costi con Smart tier in Azure Blob Storage
Creare espressioni riutilizzabili nelle query LINQ per Entity Framework
Modificare lo stile in una QuickGrid Blazor
Impostare la content-visibility in CSS per ottimizare il rendering iniziale di una pagina
Monitorare le tabelle di Azure SQL Database con Change Event Streaming
Evitare memory leaks nelle closure JavaScript
Gestione delle scrollbar dinamiche in HTML e CSS
Definire il colore di una scrollbar HTML tramite CSS
Integrare il Docker Model Runner in un workflow di GitHub


