Focus-to-float input label in pure CSS

In a recent project with Bulma as the CSS framework, I built a focus to float input label effect in pure CSS.

The effect demo

Screen demo

Implementation notes

  • Base on the Bulma CSS Framework form HTML structure
  • To add the floating label effects, add class="has-floating-label" on the .control
  • add class="with-floating-label" on the .input.is-medium
  • and add class="is-floating-label" on the label which stands after the input, it should get the CSS for the floating label.
  • placeholder=" " is required on input as the CSS uses :placeholder-shown as selector* Tested and works on modern browsers (webkit since 2019)

CodePen Source code and demo

PlaygroundFront-end developmentForm design

Connect

Keep updated with her latest updates on design, code and writing. Follow her on Twitter or GitHub.

欢迎订阅博客RSS,分享她的思考、记录与分享

Drop her an email

This website was designed and built by Millie with Bulma, Gatsby and Netlify.