Creare l'effetto floating label per gli input con Bootstrap 5

di Morgan Pizzini, in HTML5, Boostrap,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi