Floating Labels

Form labels that float above the input on focus using :placeholder-shown.

Published May 19, 2026

Demo

Full name

Email address

HTML
				
				<div class="field">
  <input type="text" id="name" placeholder=" ">
  <label for="name">Full name</label>
</div>

			

CSS
				
				.field {
  position: relative;
}

input {
  padding: 1.25rem 1rem .5rem;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s;
}

input:focus {
  border-color: #5b4cdb;
}

label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #999;
  pointer-events: none;
  transition: top .2s, font-size .2s, color .2s;
}

input:focus + label,
input:not(:placeholder-shown) + label {
  top: .5rem;
  font-size: .75rem;
  color: #5b4cdb;
  transform: none;
}

			

How it works

The <label> sits on top of the <input> at normal size. The key selector is input:not(:placeholder-shown) + label — when the placeholder is hidden (because the user typed something), the label floats up. A placeholder of a single space is required to make :placeholder-shown work correctly on empty inputs.