https://github.com/anyblades/float-label-css
Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser 🥷
https://github.com/anyblades/float-label-css
blades classless css float-label float-labels floating-label floating-labels pico-css picocss
Last synced: about 14 hours ago
JSON representation
Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser 🥷
- Host: GitHub
- URL: https://github.com/anyblades/float-label-css
- Owner: anyblades
- License: mit
- Created: 2016-10-11T13:19:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2026-06-26T01:46:17.000Z (6 days ago)
- Last Synced: 2026-06-26T03:12:57.476Z (6 days ago)
- Topics: blades, classless, css, float-label, float-labels, floating-label, floating-labels, pico-css, picocss
- Homepage: https://blades.ninja/css/float-label/
- Size: 1.92 MB
- Stars: 129
- Watchers: 6
- Forks: 37
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🥷 Pure CSS Float Label. Finally classless.
Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
[](https://github.com/anyblades/float-label-css)
[](https://github.com/anyblades/float-label-css)
## [Demo ↗](https://blades.ninja/css/float-label/#demo)
[
](https://blades.ninja/css/float-label/#demo)
Examples:
- [**Pico + *Bl*ades** with Float Label CSS v2 included](https://blades.ninja/css/float-label/#demo)
- [**Tailwind v4** + Float Label CSS v2](https://codepen.io/tonystar/pen/ALaZrV)
- [**Float Label CSS v2 only**](https://codepen.io/tonystar/pen/JRLaKw) (no CSS frameworks)
---
## Killer features
- No JS — pure CSS
- No hacks with `required` and `:valid`
↳ HTML5 validation support
- Compatible with `` and `` fields
- No need to define `for="..."` attribute on ``
- NEW in **v2:** Finally, the text label can be placed BEFORE the input field!
- NEW in **v2:** Class-less!
---
## [Install ↗](https://blades.ninja/css/standalone/)
---
## Usage
Simply place `` inside `` to enable float label:
```html
Email
```
**NOTE:** W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL)!
Alternatively wrap `` and `` inside `.has-float-label`:
```html
Email
```
**NOTE**: `for="..."` attribute is required on `` in this case
---
## Credits
- [Matt D. Smith](https://x.com/mds) for [original pattern](https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction)
- Emil Björklund for [`:placeholder-shown`](https://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/)
- [Anton Staroverov](https://x.com/AntonStarovero_) for [`:has(*:placeholder-shown:not(:focus)) label`](https://blades.ninja/css/float-label/#how)
- to finally support labels before input fields
- instead of [`input:focus + label`](https://css-tricks.com/float-labels-css/) used previously
---
## Browser support
Any browser with https://caniuse.com/css-placeholder-shown, https://caniuse.com/css-has and https://caniuse.com/css-nesting.
All non-supporting browsers should gracefully fall-back to the default layout.
=> Can be used in ANY browser _as is_!
---
Featured by:
- https://github.com/dbohdan/classless-css
- https://github.com/pryley/float-labels.js
- https://github.com/uptonking/note4yaoo/blob/main/toc/toc-lib-css-only.md#css-tools
- https://github.com/bcgov/moh-fpcare `package.json`
---
## PS: [How it works?](https://blades.ninja/css/float-label/#how)