DEV Community


Posted on • Updated on

Input with label using CSS - Tutorial

Image description


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>
Enter fullscreen mode Exit fullscreen mode


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

.input_container {
    position: relative;
    font-family: BlinkMacSystemFont;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Then I'll just remove the outline on focus.

.input_container input:focus {
    outline: none;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find the code and video tutorial here.

Thank you for reading. ❤️

Top comments (0)