Creating a floating label using HTML and CSS

Creating a floating label using HTML and CSS

Hello everyone 👋, I hope you are doing great.

So, Today we are going to learn how to create a floating label using HTML and CSS 😎.


Let’s first set up our HTML.

      <input id="email" type="email" placeholder=" " />
      <label for="email">Email</label>
      <input id="password" type="password" placeholder=" " />
      <label for="password">Password</label>


Now, let’s set up our CSS.

div {
  display: flex;
  flex-direction: column-reverse;

input {
  border: none;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  border-bottom: 0.2rem solid #bdbdbd;
  outline: none;

label {
  padding-left: 1rem;
  color: #bdbdbd;
  transform: translateY(4.8rem);
  transform-origin: left top;
  cursor: text;

Now, let’s set up the input functionality when the input is focused.

input:not(:placeholder-shown) {
  border-bottom: 0.2rem solid #212121;

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  padding: 0;
  color: #212121;
  transform: translateY(2rem) scale(0.8);

That’s It 😎.


📚 Further Reading:

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

Leave a Reply

Your email address will not be published.