Simple Floating Placeholder in HTML and CSS

5 min readApr 23, 2023

In this post we going to make a simple login form with float up placeholder using only html & css. Whenever user focus on input field, placeholder float up to give space for input. Actually its not a placeholder attribute that float up, Here its a label tag that float up when input field it focused.

Placeholder show’s that which value, input field is expecting. When you use placeholder attribute to input field, it hide’s when user type in input field. So here i have used label tag that float up when input field focus and input field has value.

Video tutorial of floating placeholder :

Floating Placeholder

Floating Placeholder.

To make this floating placeholder first, I have added Login form, which is very basic, In login form their is only input fields for username and password their is no link for forgot password, signup, contact us etc. Because the main focus of this blog post is to create input field that float’s up placeholder, When focused.

So here, We are not using placeholder attribute, Instead of, We going to use label tag. And wherever user focus on input field, label tag style changes (to float up). So let’s start making it.

First of all, Create two files with index.html and index.css and link index.css file to index.html.

Here below are the steps, which, I have created for you to make floating placeholder using html and css.

Step 1 : Create box and add title .

First of all, I have added box and title (login) .

<div class="container">
    <div class="box">
        <h1>Login</h1>
        
    </div>
</div>

*{
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg , #250654 , #960080);
    position: relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 350px;
    background-color: #fff;
    padding: 20px 30px;
    box-shadow: 0px 4px 30px -10px rgb(0 0 0);
}
.box h1{
    text-align: center;
    font-size: 40px;
}

Step 2 : Add input fields.

Now inside box below the title, Lets add input fields inside form tag, We do not add placeholder attribute here, instead we add label tag after input tag. and wrap the input field and label tag inside div with class value input-box, and set position absolute to label tag and relative to input-box. See the below code.

<form action="#">

    <div class="input_box">
        <input type="text" required>
        <label>Username</label>
    </div>


</form>

.box form .input_box{
    width: 100%;
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    margin-top: 30px;
    position: relative;
}
.box form .input_box input{
    width: 100%;
    border: none;
    outline: none;
    font-size: 25px;
    padding: 7px 0px;
}
.box form .input_box label{
    position: absolute;
    left: 0px;
    font-size: 25px;
    top: 8px;
    pointer-events: none;
    transition: 0.2s;
}

Step 3 : Making placeholder float up when focus.

To float up placeholder(here placeholder is label tag) I used css. To float up, I have use :focus selector to input tag. And as you can see in below css code that, I have wrote + sign before label tag. So it work on label, only if it is placed right after the input tag in html file. If label tag is not placed after the input tag in html file, then it won’t work. I hope you understand.

Till now placeholder succesfully floats up, when user focus on input field. But when input field unfocus it again back into the input field even if it has value in or not. So lets fix it.

So, I have used :valid selector in css (see the below code), Means placeholder stay up, When user typed valid value according to input field type. You also need to add required attribute to input field.

.box form .input_box input:focus + label,
.box form .input_box input:valid + label{
    top: -15px;
    font-size: 18px;
    color: blue;
}

Step 4 : Now add another input field and button to submit form.

Now we have to just copy and paste the whole div tag with class value input-box in html file. No need write separate style for it, As the classname and tags are same. So let’s add another input field for password.

And also add button to submit the form, and as you can see, I have added required attribute to input field. So when user click in button without adding value to input fields, then it shows message to fill the field.

<div class="input_box">
    <input type="text" required>
    <label>Password</label>
</div>
<button class="button" type="submit">Login</button>h

.box .button{
    margin-top: 30px;
    font-size: 25px;
    padding: 7px 20px;
    color: #fff;
    border: none;
    background-color: #250654;
    float: right;
    cursor: pointer;
}
.box .button:active{
    color: #000;
    background-color: #fff;
}