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
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare l nesting nativo dei CSS
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Selettore CSS :has() e i suoi casi d'uso avanzati
Configurare lo startup di applicazioni server e client con .NET Aspire
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Utilizzare WhenEach per processare i risultati di una lista di task
Anonimizzare i dati sensibili nei log di Azure Front Door
Creare una libreria CSS universale: Clip-path
Usare il colore CSS per migliorare lo stile della pagina