Hit enter after type your search item

Create floating labels with CSS float and other properties

Floating labels for input fields by using CSS

In this tutorial, floating labels for the form input fields are created by using CSS float and other properties.

The text field labels float upwards as any textbox gets focused by pressing the mouse click or tab key from the keyboard.

Have a look at the code and online demo in the following section where a form is created with floating labels.


A demo of creating floating labels as using CSS float property

See the following example where a form is created with a few general fields like Name, Email etc. As the demo page loads, the form fields are filled with the labels inside the text boxes or text area. When you enter the mouse inside any textbox, the label will “float” upwards to the top of that respective textbox. Have a look by clicking the image or link below:

CSS floating form

See online demo and code

Following is the CSS:


The markup:

You can see, CSS transition is used for the floating labels with ease-in-out value.

Get the complete code and view the live demo on the demo page.

(Credit: skielbasa)

This div height required for enabling the sticky sidebar