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