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
Utilizzare i variable font nel CSS
Ricevere notifiche sui test con Azure Load Testing
Le cron expression di un workflow di GitHub
Effettuare la ricerca di testo nascosto in una pagina web con Javascript
Utilizzo di CSS Scroll Snap per realizzare un carousel
Gestione delle scrollbar dinamiche in HTML e CSS
Gestione delle issue type con GitHub
Utilizzare i command service nei test con .NET Aspire
Abilitare .NET 10 su Azure App Service e Azure Functions
Gestire progetti NPM in .NET Aspire
Integrare SQL Server in un progetto .NET Aspire
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
I più letti di oggi
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Sfruttare una CDN con i bundle di ASP.NET
- Esaminare documenti XML con namespace utilizzando LINQ to XML
- Alleggerire le applicazioni WPF sfruttando gli oggetti Freezable
- Effetto turnstile su tutte le pagine con il Windows Phone Toolkit
- Le DirectInk API nella Universal Windows Platform
- Gli oggetti CallOut di Expression Blend 4.0


