Floating label effect in FluentForms (CSS only)

tdrayson

I’ve seen this floating label effect around the internet and it looked really cool. A lot of the solutions I found, required javascript, however with the new CSS selectors that have been added recently, we can create a full CSS only solution.

This solution uses the form’s label field to ensure accesibility. The placeholder text will be hidden.

Demo

Code Snippet

Add the code below to your css stylesheet.

You may have to modify some of the values to get it working 100% with your theme. However this should get you most of the functionality out of the box.

Members content only

Become a SnippetClub member to gain instant access to this tutorial plus tons more premium content.

Already a member? Log in below.

Login Form

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

Newsletter

🔒I won't send you spam, I promise