CSS Floating Labels

Today we will be looking at floating labels in CSS. Floating labels are a popular design pattern that can improve the usability of your forms. They work by transforming the label text into a placeholder that sits inside the input field when it's not in focus. When the user focuses on the field, or if the field already has a value, the label animates up and out of the way, making more room for the user to type. This can be a helpful way to save space on forms, especially on mobile devices. In this blog post, we'll explore how to create floating labels using pure CSS, as well as the benefits and drawbacks of this design technique.

The HTML Code

The first step to creating floating labels is setting up the basic HTML structure for your form. Here's the code we'll be working with:

<div class="form-container">
  <div class="form-row">
    <input type="text" id="firstname" placeholder="">
    <label for="firstname">First Name</label>
  </div>
  <div class="form-row">
    <input type="text" id="lastname" placeholder="">
    <label for="lastname">Last Name</label>
  </div>
  <div class="form-row">
    <input type="email" id="email" placeholder="">
    <label for="email">Email Address</label>
  </div>
</div>

Let's break down what each part does:

• .form-container: This is a wrapper element that will hold all of our form fields. We can style this element later to control the overall look of the form.
• .form-row: Each input field and its corresponding label are wrapped in a .form-row element. This helps us style the layout of each row within the form.
• <input>: These are the actual input fields where users will enter their information. We have three inputs here: firstname, lastname, and email. The type attribute specifies the type of data the user should enter (text or email in this case). We've also removed the placeholder attribute as we'll be using the label for this functionality.
• <label>: These elements define the labels for each input field. The for attribute associates the label with a specific input field using its id. In this case, the for attribute of the First Name label matches the id of the firstname input field.

This HTML structure provides a clean foundation for us to apply CSS styles and create the floating label effect.

The CSS Code

Now that we have the basic HTML structure, let's add some CSS styles to create the floating label effect. Here's the CSS code we'll be using, broken down into each rule-set for better understanding:

1. .form-container

.form-container {
  padding: 30px;
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

This rule styles the container element for our form. It adds some padding to create space around the form fields, centers the form horizontally using margin: 0 auto, and sets a maximum width for responsiveness. It also ensures the container takes up 100% of the available width on smaller screens.

2. .form-row

.form-row {
  position: relative;
  margin-bottom: 20px;
}

This rule styles each row within the form. It sets the position to relative which will be important for positioning the label element later. It also adds some space between each row for better readability.

3. .form-row input

.form-row input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

This rule styles the input fields themselves. It sets them to take up 100% of the available width within their row, adds some padding for better visual separation, defines a border style and radius, and sets the font size.

4. .form-row label

.form-row label {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 14px;
  color: #777;
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}

This rule styles the label elements. It sets their position to absolute which allows us to position them precisely within the row. It defines the initial location of the label (left and top), sets the font size and color, and adds a transition effect for smooth animations when the label state changes.

5. .form-row input:focus + label, .form-row input:not(:placeholder-shown) + label

.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 12px;
  border:1px solid #ccc;
  border-radius: 5px;
  color: #444;
  background-color: #f2f2f2;
  padding: 0 4px;
  left: 10px;
}

This is the key rule that creates the floating label effect. It targets two scenarios:

• When the input field is focused (input:focus)
• When the input field has a value (input:not(:placeholder-shown))

In these cases, the label animates to a smaller size and moves closer to the top of the input field. It also gains a slight border, background color, and a bit of padding for better visual separation.

6. .form-row input:focus, .form-row input:focus + label

.form-row input:focus, .form-row input:focus + label {
  border: 1px solid #888;
  outline: none;
}

This rule styles the input field and its label when the input is focused. It adds a slightly darker border to the input for better focus indication and removes the default browser outline.

This combination of CSS rules creates the functionality for floating labels. As you interact with the form, the labels will transform and adapt based on whether the field is focused or has a value, providing a clean and user-friendly experience.

The Result

Here's the final result of the code we've been working with. Try interacting with the form below to see the floating labels in action!

As you can see, the labels initially sit inside the input fields. When you focus on an input field or if it already has a value, the label smoothly animates up and out of the way, providing more space for you to type. This can be especially helpful on mobile devices where screen space is limited.

Benefits and Drawbacks of Floating Labels

Floating labels offer a unique approach to form design, but it's important to consider both their advantages and potential drawbacks before implementing them in your project.

Benefits:

• Space Saving: Floating labels can save space on forms, especially those with many fields. By transforming the label into a placeholder within the input field, you can reduce clutter and create a cleaner layout. This is particularly beneficial for mobile forms where screen real estate is limited.
• Improved Clarity: When a user focuses on an input field or has already entered a value, the floating label stays visible, providing constant context about the information being requested. This can be helpful for users who may forget what information is needed in each field, especially on lengthy forms.
• Modern Aesthetic: Floating labels contribute to a clean and modern design aesthetic. The minimal approach can be visually appealing and aligns with current web design trends.

Drawbacks:

• Lower Familiarity: Compared to traditional static labels, floating labels may be less familiar to some users. This can lead to a slight learning curve as users encounter this design pattern for the first time.
• Potential Accessibility Issues: If not implemented carefully, floating labels can create accessibility concerns. For example, labels with low color contrast or disappearing text can make it difficult for users with visual impairments to understand the form.
• Increased Cognitive Load: The animation and transformation of labels can add to the cognitive load for some users. This may be particularly true for users with slower processing speeds or those who find animations distracting.

Conclusion

Floating labels can be a valuable tool for form design, but it's important to weigh the benefits and drawbacks carefully. If you decide to implement them, ensure they are designed with accessibility in mind and consider the overall user experience for your target audience.

About CSSPortal

CSSPortal.com is a comprehensive resource dedicated to CSS, HTML, and website design. It offers an extensive range of tools, resources, and generators aimed at assisting designers and developers in creating efficient and aesthetically pleasing web designs. The website features hundreds of pages containing all CSS properties and numerous CSS generators, designed to facilitate various design needs.