Placeholder Animation With CSS

Placeholder Animation With CSS

In this tutorial we will see how to create Placeholder Animation With CSS. Pure CSS is used to move placeholder of HTML input element to the top, complete CSS code is given.

Table of Contents

HTML Code

HTML Code is given below, in this code we have a input element and label tag which is used as a container of placeholder.

<form class="form">
    <div class="input-group">
    <input type="text" class="input">
    <label class="placeholder">Placeholder</label>    
    </div>
</form>

CSS Code

CSS Code is given below, in this code we have used CSS position property and transition property to animate placeholder and change it's position towards top.

body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #04AA6D;
    font-family: 'Barlow Condensed', sans-serif;
}
.form
{
    background-color: #fff;
    padding: 40px 20px;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #666;
}
.input-group
{
    position: relative;
}
.input
{
    padding: 10px;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #04AA6D;
}
.placeholder
{
    position: absolute;
    top: 10px;
    left: 8px;
    font-size: 14px;
    padding: 0px 5px;
    color: #666;
    transition: 0.3s;
    pointer-events: none;
}
.input:focus + .placeholder
{
    top: -10px;
    color: #04AA6D;
    background-color: #fff;
}

Demo

Check Demo

Video Tutorial

Watch our video tutorial on how to create Placeholder Animation With CSS.

Tags