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:

body {

  background: #C4E1E1;

  font-family: Verdana, sans-serif;

}

 

.page-wrap {

  max-width: 500px;

  margin: 0 auto;

}

 

h2 {

  color: #408080;

  font-size: 20px;

}

 

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {

  font-size: 0.75em;

  color: #8e44ad;

  top: -2.25rem;

  -webkit-transition: all 0.125s ease-in-out;

  transition: all 0.2s ease-in-out;

}

 

.floating-field {

  float: right;

  width: 33.3333%;

  margin: 2rem 0 1rem;

  position: relative;

  border:1px black #2C5656;

}

.floating-field label {

  color: #C5E2E2;

  padding: 1rem;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-transition: all 0.25s ease-in-out(0.2, 0, 0.03, 1);

  transition: all 0.25s ease-in-out;

 

}

.floating-field.wide {

  width: 100%;

}

 

input, textarea {

  padding: 1rem 1rem;

  border: 1px solid #008000;

  width: 100%;

  font-size: 1rem;

}

input ~ span, textarea ~ span {

  display: block;

  width: 0;

  height: 3px;

  background: #8e44ad;

  position: absolute;

  bottom: 0;

  left: 0;

  -webkit-transition: all 0.125s ease-in-out;

  transition: all 0.125s ease-in-out;

}

input:focus, textarea:focus {

  outline: 0;

}

input:focus ~ span, textarea:focus ~ span {

  width: 100%;

  -webkit-transition: all 0.125s ease-in-out;

  transition: all 0.125s ease-in-out;

}

 

textarea {

  width: 100%;

  min-height: 13em;

}

The markup:

<div class="page-wrap">

  <h2>A pure CSS floating label solution</h2>

  <form>

    <div class="floating-field">

      <input type="text" required />

      <label>Your Name</label>

      <span></span>

    </div>

    <div class="floating-field">

      <input type="email" required />

      <label>Your Email</label>

      <span></span>

    </div>

    <div class="floating-field">

      <input type="tel" required />

      <label>Mobile No:</label>

      <span></span>

    </div>

    <div class="floating-field wide">

      <textarea required></textarea>

      <label>Feedback / Enquiry</label>

      <span></span>

    </div>

  </form>

</div>

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)