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
Evitare la compressione degli artefatti in un workflow di GitHub
Avviare rapidamente un container con Azure Container Apps Express
Utilizzare i command service nei test con .NET Aspire
Introduzione a GitHub Copilot CLI
Impostare automaticamente l'altezza del font tramite CSS
Impostare la content-visibility in CSS per ottimizare il rendering iniziale di una pagina
Logica Graceful Degradation in HTML e CSS
Migliorare accessibilità e interazioni nelle pagine HTML con gli attributi inert e autofocus
Creare comandi nella dashboard .NET Aspire
Importare repository da Bitbucket a GitHub Enterprise Cloud
Centralizzare e governare MCP server e Skill con Azure API Center
.NET Aspire vs Dapr: differenze, sovrapposizioni e integrazione



