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