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.

Result:

The result screen capture

Try it here:

Keynotes

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

Source code on CodePen

Need design and development talent for your next digital project?

Drop me a message with project briefing and your contact. I'll get in touch with you further within 24 hours.

Drop me a message