Pure CSSMIT licensed

Floating Label

Classic floating label input. The placeholder lifts and shrinks above the field on focus — a calm, accessible pattern used across every modern product surface.

Published May 4, 2026

Live Demo

Try it

The code

<label class="if-01">
  <input type="email" name="email" autocomplete="email" placeholder=" " required />
  <span class="if-01-label">Email address</span>
</label>

<label class="if-01">
  <input type="email" name="email" autocomplete="email" placeholder=" " required />
  <span class="if-01-label">Email address</span>
</label>

.if-01 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-01 input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.if-01 input:focus {
  border-color: #7c6cff;
  background: #1f1f2a;
}

.if-01-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: transform 0.2s, font-size 0.2s, color 0.2s;
}

.if-01 input:focus + .if-01-label,
.if-01 input:not(:placeholder-shown) + .if-01-label {
  transform: translateY(-9px);
  font-size: 10px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.if-01 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-01 input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.if-01 input:focus {
  border-color: #7c6cff;
  background: #1f1f2a;
}

.if-01-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: transform 0.2s, font-size 0.2s, color 0.2s;
}

.if-01 input:focus + .if-01-label,
.if-01 input:not(:placeholder-shown) + .if-01-label {
  transform: translateY(-9px);
  font-size: 10px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Floating Label
Source: https://codefronts.com/components/css-input-fields/floating-label/

Classic floating label input. The placeholder lifts and shrinks above the field on focus — a calm, accessible pattern used across every modern product surface.
## HTML
```html
<label class="if-01">
  <input type="email" name="email" autocomplete="email" placeholder=" " required />
  <span class="if-01-label">Email address</span>
</label>
```
## CSS
```css
.if-01 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-01 input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.if-01 input:focus {
  border-color: #7c6cff;
  background: #1f1f2a;
}

.if-01-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: transform 0.2s, font-size 0.2s, color 0.2s;
}

.if-01 input:focus + .if-01-label,
.if-01 input:not(:placeholder-shown) + .if-01-label {
  transform: translateY(-9px);
  font-size: 10px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Floating Label
Source: https://codefronts.com/components/css-input-fields/floating-label/

Classic floating label input. The placeholder lifts and shrinks above the field on focus — a calm, accessible pattern used across every modern product surface.
## HTML
```html
<label class="if-01">
  <input type="email" name="email" autocomplete="email" placeholder=" " required />
  <span class="if-01-label">Email address</span>
</label>
```
## CSS
```css
.if-01 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-01 input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.if-01 input:focus {
  border-color: #7c6cff;
  background: #1f1f2a;
}

.if-01-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: transform 0.2s, font-size 0.2s, color 0.2s;
}

.if-01 input:focus + .if-01-label,
.if-01 input:not(:placeholder-shown) + .if-01-label {
  transform: translateY(-9px);
  font-size: 10px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
```

How this works

This is the canonical Material floating label pattern, implemented as pure CSS with zero JavaScript. The input carries a single-space placeholder (placeholder=" "), which is what makes the :placeholder-shown pseudo-class flip cleanly between empty and filled states. The label sibling is absolutely positioned over the field and lifts using a transform: translateY plus a font-size shrink.

The lift is driven by two selectors combined with the adjacent sibling combinator: input:focus + .if-01-label handles focus, and input:not(:placeholder-shown) + .if-01-label keeps the label lifted once the user has typed. Both fire the same transition so the label never snaps back down while the field holds a value. This is a solid copy-paste replacement for jQuery-based floating-label scripts and the Bootstrap floating-label component.

Make it yours

Swap the accent by changing the #a78bfa label colour and the #7c6cff focus border — the two work as a light/dark pair.
Retune the lift distance by editing translateY(-9px); pair it with the input's top padding (18px 14px 8px) so text never collides with the label.
Adjust motion by changing all three 0.2s transitions in lockstep — keep them identical or the label and border desync visibly.
Convert the label's uppercase treatment to sentence case by removing text-transform and bumping the shrunk font-size from 10px to 11px.

Gotchas — read before shipping

The placeholder attribute must be a single space, not empty. Removing it breaks :placeholder-shown and the label stays lifted permanently.
The label must be a direct next sibling of the input for + to match — reordering the markup or wrapping either in a container silently kills the lift.
Autofilled values in Chrome do not always trigger :placeholder-shown updates; test with saved credentials before shipping login forms.

Browser support

Chrome	Safari	Firefox	Edge
90+	14+	88+	90+

The :placeholder-shown selector and adjacent sibling combinator are universally supported across evergreen browsers; no polyfill needed.