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
- Base on the Bulma CSS Framework form HTML structure
- To add the floating label effects, add
- 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
inputas the CSS uses
:placeholder-shownas selector* Tested and works on modern browsers (webkit since 2019)