Input Floating Labels using only pure CSS.

Create a Google Material-like Floating label concept using CSS pseudo-class:placeholder-shown.

Hello Developers, Today we will create an awesome Google Material Styled Floating Label using pure CSS. Floating labels are also effective as a view of Good UX.

❓ What are Floating Labels?
A floating Label is a concept when the user typed something in an input field then the placeholder or label wants to move up and display heading information to show the user what to enter in the input Field like Username, Email, etc…

💻 How to create Floating Labels with Input Fields.
In CSS we have a pseudo-class name:placeholder-shown to detect whether the input placeholder is visible or not. If a user entered a value into the input then:placeholder-shown is false otherwise it will apply the CSS to the input Field.

• Let’s add Some HTML.

<div class="box">
   <div class="input-wrapper">
     <input type="text" id="input" class="form-control" placeholder="Full Name">
     <label for="input" class="control-label">Full name</label>
   </div>
 </div>

Here We will create a .box a wrapper container for input and label.

• Let’s add some CSS.

.input-wrapper {
  position: relative;
  margin: 20px auto;
}
.form-control {
  display: block;
  line-height: 2em;
  margin: 0;
  padding-left: 10px;
  width: 100%;
  font-size: medium;
  border: 1px solid #f4f4f4;
  background-color: #f4f4f4;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 500;
}
.form-control:focus {
  border: 1px solid #2c7ac9;
}
.control-label {
  display: block;
  position: absolute;
  opacity: 0;
  bottom: 1.9rem;
  color: #5d5d5d;
  transition: 0.2s ease-in-out transform;
  font-size: 12px;
}
.form-control:placeholder-shown + .control-label {
  visibility: hidden;
  z-index: -1;
  transition: 0.2s ease-in-out;
}
.form-control:not(:placeholder-shown) + .control-label,
.form-control:focus:not(:placeholder-shown) + .control-label {
  visibility: visible;
  z-index: 1;
  opacity: 1;
  transform: translateY(-10px);
  transition: 0.2s ease-in-out transform;
}
/**
 * Extra Css - not Required
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
body {
  font-family: "Poppins", sans-serif;
  background-color: #2c7ac9;
}
.box {
  width: 30%;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
}

Here, .form-control:placeholder-shown + .control-label class query detects that if the placeholder is visible then .control-label is hidden to the screen.

While the user entered input into the input text field the following rule is applied : .form-control:not(:placeholder-shown) + .control-label,
.form-control:focus:not(:placeholder-shown) + .control-label
is described if the input field placeholder is not shown then .control-label is visible to the user.

And That’s Done…

Let’s see the output:

Output

Visit My Codepen

Let me know if you have any query in comment section.
Thanks 👐 🙌