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
  • 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


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


Subscribe to RSS

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