Input with label using CSS - Tutorial

HTML

For HTML we'll need a container with label and input.

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 type="text" name="name" placeholder=" ">
        <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 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_container 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: .2s;
}

For input, I'll set border color to the same light grey color I used on label's text color.

I'll also add some border radius, paddings and set background color to transparent, so that the label behind is visible.

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

Then I'll just remove the outline on focus.

.input_container input:focus {
    outline: none;
}

Now I'm styling the label when input is in focus or has some value.

Using "input: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_container input:focus + label,
.input_container input:not(:placeholder-shown) + 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_container input:focus + label {
    color: rgb(15, 156, 116);
}
.input_container input:focus {
    border-color: rgb(15, 156, 116);
}

And that's it.

You can find the code and video tutorial here.

Thank you for reading. ❤️