Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

May 4, 2020 07:57 am GMT

Creating a floating label using HTML and CSS

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