16 CSS Floating Label Inputs09 / 16

Pure CSSMIT licensed

Material Design Outlined Text Field in Pure CSS

The classic Google-style outlined text field: on focus the label glides up onto the border line and the outline visually 'opens' a notch around it — built with a single background trick, no fieldset/legend hacks, no extra wrapper spans, no JS measuring label widths.

Published

Live Demo
Try it

The code

<section class="flb-09" aria-label="Outlined material floating label demo">
  <form class="flb-09__form" novalidate>
    <h3 class="flb-09__title">Payment details</h3>
    <div class="flb-09__field">
      <input class="flb-09__input" type="text" id="flb-09-card" name="cc-number" placeholder=" " inputmode="numeric" autocomplete="cc-number">
      <label class="flb-09__label" for="flb-09-card">Card number</label>
    </div>
    <div class="flb-09__row">
      <div class="flb-09__field">
        <input class="flb-09__input" type="text" id="flb-09-exp" name="cc-exp" placeholder=" " inputmode="numeric" autocomplete="cc-exp">
        <label class="flb-09__label" for="flb-09-exp">MM / YY</label>
      </div>
      <div class="flb-09__field">
        <input class="flb-09__input" type="text" id="flb-09-cvc" name="cc-csc" placeholder=" " inputmode="numeric" autocomplete="cc-csc">
        <label class="flb-09__label" for="flb-09-cvc">CVC</label>
      </div>
    </div>
    <button class="flb-09__btn" type="button">Pay $48.00</button>
  </form>
</section>
.flb-09,
.flb-09 *,
.flb-09 *::before,
.flb-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flb-09 {
  --accent: oklch(0.5 0.17 285);
  --surface: #ffffff;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebe9f2;
  padding: 40px 20px;
}

.flb-09__form {
  width: min(400px,100%);
  background: var(--surface);
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: 0 24px 60px -32px rgba(40,30,80,.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.flb-09__title {
  font-size: 23px;
  font-weight: 800;
  color: #1f1b2e;
  letter-spacing: -.02em;
}

.flb-09__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.flb-09__field {
  position: relative;
}

.flb-09__input {
  width: 100%;
  height: 56px;
  padding: 14px 16px;
  font-size: 16px;
  color: #1f1b2e;
  background: transparent;
  border: 1.5px solid #c9c4da;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
}

.flb-09__input:hover {
  border-color: #a29bc;
}

.flb-09__input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.flb-09__label {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  font-size: 16px;
  color: #756e8c;
  background: var(--surface);
  padding: 0 5px;
  pointer-events: none;
  transform-origin: left center;
  transition: transform .18s,color .18s;
}

.flb-09__input:focus ~ .flb-09__label,
.flb-09__input:not(:placeholder-shown) ~ .flb-09__label {
  transform: translateY(-28px) scale(.76);
}

.flb-09__input:focus ~ .flb-09__label {
  color: var(--accent);
  font-weight: 600;
}

.flb-09__btn {
  height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s,transform .15s;
}

.flb-09__btn:hover {
  filter: brightness(1.12);
}

.flb-09__btn:active {
  transform: scale(.985);
}

.flb-09__btn:focus-visible,
.flb-09__input:focus-visible {
  outline: 3px solid oklch(0.5 0.17 285 / .5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .flb-09__label,
    .flb-09__input,
    .flb-09__btn {
    transition: none;
  }
}
/* No JavaScript — the floated label carries the surface background + side padding, so it visually notches the border. No legend hacks, no width measuring. */
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 Floating Label Input 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: Material Design Outlined Text Field in Pure CSS
Source: https://codefronts.com/components/css-floating-label-inputs/material-design-outlined-text-field-in-pure-css/

The classic Google-style outlined text field: on focus the label glides up onto the border line and the outline visually 'opens' a notch around it — built with a single background trick, no fieldset/legend hacks, no extra wrapper spans, no JS measuring label widths.
## HTML
```html
<section class="flb-09" aria-label="Outlined material floating label demo">
  <form class="flb-09__form" novalidate>
    <h3 class="flb-09__title">Payment details</h3>
    <div class="flb-09__field">
      <input class="flb-09__input" type="text" id="flb-09-card" name="cc-number" placeholder=" " inputmode="numeric" autocomplete="cc-number">
      <label class="flb-09__label" for="flb-09-card">Card number</label>
    </div>
    <div class="flb-09__row">
      <div class="flb-09__field">
        <input class="flb-09__input" type="text" id="flb-09-exp" name="cc-exp" placeholder=" " inputmode="numeric" autocomplete="cc-exp">
        <label class="flb-09__label" for="flb-09-exp">MM / YY</label>
      </div>
      <div class="flb-09__field">
        <input class="flb-09__input" type="text" id="flb-09-cvc" name="cc-csc" placeholder=" " inputmode="numeric" autocomplete="cc-csc">
        <label class="flb-09__label" for="flb-09-cvc">CVC</label>
      </div>
    </div>
    <button class="flb-09__btn" type="button">Pay $48.00</button>
  </form>
</section>
```
## CSS
```css
.flb-09,
.flb-09 *,
.flb-09 *::before,
.flb-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flb-09 {
  --accent: oklch(0.5 0.17 285);
  --surface: #ffffff;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebe9f2;
  padding: 40px 20px;
}

.flb-09__form {
  width: min(400px,100%);
  background: var(--surface);
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: 0 24px 60px -32px rgba(40,30,80,.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.flb-09__title {
  font-size: 23px;
  font-weight: 800;
  color: #1f1b2e;
  letter-spacing: -.02em;
}

.flb-09__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.flb-09__field {
  position: relative;
}

.flb-09__input {
  width: 100%;
  height: 56px;
  padding: 14px 16px;
  font-size: 16px;
  color: #1f1b2e;
  background: transparent;
  border: 1.5px solid #c9c4da;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
}

.flb-09__input:hover {
  border-color: #a29bc;
}

.flb-09__input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.flb-09__label {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  font-size: 16px;
  color: #756e8c;
  background: var(--surface);
  padding: 0 5px;
  pointer-events: none;
  transform-origin: left center;
  transition: transform .18s,color .18s;
}

.flb-09__input:focus ~ .flb-09__label,
.flb-09__input:not(:placeholder-shown) ~ .flb-09__label {
  transform: translateY(-28px) scale(.76);
}

.flb-09__input:focus ~ .flb-09__label {
  color: var(--accent);
  font-weight: 600;
}

.flb-09__btn {
  height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s,transform .15s;
}

.flb-09__btn:hover {
  filter: brightness(1.12);
}

.flb-09__btn:active {
  transform: scale(.985);
}

.flb-09__btn:focus-visible,
.flb-09__input:focus-visible {
  outline: 3px solid oklch(0.5 0.17 285 / .5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .flb-09__label,
    .flb-09__input,
    .flb-09__btn {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — the floated label carries the surface background + side padding, so it visually notches the border. No legend hacks, no width measuring. */
```

How this works

Material's own implementation splits the outline into three SVG parts and measures the label with JS. This demo cheats elegantly: the input has a normal border and rounded corners, and the floated label simply gets the same background as the page card plus horizontal padding — so it sits ON the border line and its background 'erases' the border behind it, reading exactly like a notch.

The label animates with transform: translateY() scale() only. Focus swaps the border to a 2px accent without layout shift (a transparent-to-accent box-shadow compensates the width change). Works with any corner radius and any label length — the notch is always exactly as wide as the label.

Techniques used: surface-matched label background as a faux border notch (no legend/SVG) · translateY()+scale() onto the border line · inset box-shadow focus thickening (no layout shift) · works at any border-radius · grid two-column row

Make it yours

  • The label's background must match the surface behind the field — change both together (see --surface).
  • Adjust notch padding via the label's horizontal padding.
  • Corner radius is free — unlike legend-based notches, nothing breaks at large radii.
  • Thicken the focus border by editing the box-shadow spread.

Gotchas — read before shipping

  • If the field sits on a gradient or image, the flat label background gives the trick away — use the real border-clipping approach or a solid chip behind the label.
  • Compensate border-width changes with box-shadow, not border-width, or the text will jump 1px on focus.
  • Keep the floated label ≥12px computed for readability.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

Pure border + background + transform — the whole notch effect is baseline CSS from a decade ago, wrapped in a modern coat.

Techniques used in this demo

inputmodeMDN ↗autocomplete tokensMDN ↗filterMDN ↗grid-templateMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →