Float label CSS

Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.

^{Table of Contents}

---

Demo #

Drop-in support for Pico's /docs/forms :

Demo form

Name Bio Cuisine Select... Italian Japanese Indian Thai French Sign up ↺

Examples:

• Pico + Blades with Float Label CSS v2 included
• Tailwind v4 + Float Label CSS v2
• Float Label CSS v2 only (no CSS frameworks)

---

Killer features #

• No JS — pure CSS
• No hacks with required and :valid
  ↳ HTML5 validation support
• Compatible with <select> and <textarea> fields
• No need to define for="..." attribute on <label>
• NEW in v2: Finally, the text label can be placed BEFORE the input field!
• NEW in v2: Class-less!

---

Install #

Via CDN #

<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@^0.28.0-alpha/assets/float-label.min.css
">

Via npm #

npm install @anyblades/blades

Then in your .css:

@import "@anyblades/float-label";

Prepackaged #

• Blades: /anyblades/blades
• Pico: /anyblades/pico

---

How it works #

First, we target either:

1. <label> which :has inner form inputs (classless approach)
2. or explicit .has-float-label class (alternative approach)

label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
.has-float-label {
  display: block;
  position: relative;

Then, we define the default/fallback state (when the float label should be minimized):

  > span,
  label {
    position: absolute;
    left: 0;
    top: 0;
    cursor: text;
    font-size: 75%;
  }

Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:

  *:placeholder-shown:not(:focus)::placeholder {
    opacity: 0;
  }
  &:has(*:placeholder-shown:not(:focus)) {
    > span,
    label {
      font-size: inherit;
      opacity: 50%;
    }
  }
}

The :has(*:placeholder-shown:not(:focus)) trick allows this input state information to propagate to the parent level. This enables modern CSS to target inner float label (<span> or <label>) regardless of its position relative to the input field.

Historically, this was not possible: the float label had to be placed after the input field to be targeted using the input:focus + label selector.

---