Hello everyone ๐, I hope you are doing great.
So, Today we are going to learn how to create a floating label using HTML and CSS ๐.
๐ HTML
Let's first set up our HTML.
<main>
<form>
<div>
<input id="email" type="email" placeholder=" " />
<label for="email">Email</label>
</div>
<div>
<input id="password" type="password" placeholder=" " />
<label for="password">Password</label>
</div>
<button>Login</button>
</form>
</main>
๐จ CSS
Now, let's set up our CSS.
div {
display: flex;
flex-direction: column-reverse;
}
input {
border: none;
padding: 1rem;
margin-top: 2rem;
font-size: 1.6rem;
border-bottom: 0.2rem solid #bdbdbd;
outline: none;
}
label {
padding-left: 1rem;
color: #bdbdbd;
transform: translateY(4.8rem);
transform-origin: left top;
cursor: text;
}
Now, let's set up the input
functionality when the input
is focused.
input:focus,
input:not(:placeholder-shown) {
border-bottom: 0.2rem solid #212121;
}
input:focus ~ label,
input:not(:placeholder-shown) ~ label {
padding: 0;
color: #212121;
transform: translateY(2rem) scale(0.8);
}
That's It ๐.
Example
๐ Further Reading:
Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills ๐. You can follow me on Twitter if youโd like to be notified about new articles and resources.
Top comments (1)
Very important further reading: