Back

Input with label using CSS

Tutorial on how to create an input with label that is also a placeholder if input is empty.

HTML

For HTML we'll need a container with label and input elements with appropriate classes. We'll also set placeholder for input to space (" "), which will allow us to detect with CSS when input has some value.

      <div class="input_container">
        <input class="input-field" type="text" name="name" placeholder=" ">
        <label class="input-label" for="name">Name</label>
      </div>

CSS

For CSS, we'll set container's position to relative and change font.

      .input_container {
        position: relative;
        font-family: BlinkMacSystemFont;
      }

Now we'll set label's position to absolute using its class and align it in center with top 50% and transform translateX(-50%). And z-index to -1 so that the input is on top of label. Otherwise we won't be able to click on input when mouse is on label. Then we'll set background color to white (#fff). Actually here you just set the same color as your background, because this element will go on top of input's top border, and we don't want border to be behind. Lastly, I'll set text color to light grey and add some margins, paddings and a little transition.

      .input-label {
        position: absolute;
        margin: 0 5px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        background-color: #fff;
        padding: 0 2px;
        color: #aaa;
        transition: 0.2s;
      }

For input, I'll set border color to the same light grey color I used on label's text color using the input's class. I'll also add some border radius, paddings and set background color to transparent, so that the label behind is visible.

      .input-field {
        border: 1px solid #aaa;
        border-radius: 5px;
        background-color: transparent;
        padding: 5px;
      }

Then I'll just remove the outline on focus.

      .input-field:focus {
        outline: none;
      }

Now I'm styling the label when input is in focus or has some value. Using ".input-field:not(:placeholder-shown)" I'll select input when there is some value (when placeholder is not shown) and when in focus, and by using sibling "+" selector, I'll' select label, and move it on top of input's top border by setting z-index to 1 and top to 0. And I'll decrease font size.

      /* Focus or containing value (placeholder not shown) */
      .input-field:focus + .input-label,
      .input-field:not(:placeholder-shown) + .input-label {
        top: 0;
        font-size: 8px;
        z-index: 1;
      }

When input is in focus, I'll overwrite label's color and input's light grey border and set it to green.

      /* Only when focused */
      .input-field:focus + .input-label {
        color: rgb(15, 156, 116);
      }
      .input-field:focus {
        border-color: rgb(15, 156, 116);
      }

And that's it.

Whole code

<div class="input_container">
  <input class="input-field" type="text" name="name" placeholder=" ">
  <label class="input-label" for="name">Name</label>
</div>

<style>
.input_container {
  position: relative;
  font-family: BlinkMacSystemFont;
}
.input-label {
  position: absolute;
  margin: 0 5px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  background-color: #fff;
  padding: 0 2px;
  color: #aaa;
  transition: 0.2s;
}
.input-field {
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: transparent;
  padding: 5px;
}
.input-field:focus {
  outline: none;
}

/* Focus or containing value (placeholder not shown) */
.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
  top: 0;
  font-size: 8px;
  z-index: 1;
}

/* Only when focused */
.input-field:focus + .input-label {
  color: rgb(15, 156, 116);
}
.input-field:focus {
  border-color: rgb(15, 156, 116);
}
</style>

Thank you for reading this article.

Input with label using CSS

HTML

CSS

Whole code

Comments

More inputs

Similar

See also