{"id":50839506,"url":"https://github.com/anyblades/float-label-css","last_synced_at":"2026-07-01T16:01:13.832Z","repository":{"id":74808785,"uuid":"70595386","full_name":"anyblades/float-label-css","owner":"anyblades","description":"Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser 🥷","archived":false,"fork":false,"pushed_at":"2026-06-26T01:46:17.000Z","size":2011,"stargazers_count":129,"open_issues_count":1,"forks_count":37,"subscribers_count":6,"default_branch":"master","last_synced_at":"2026-06-26T03:12:57.476Z","etag":null,"topics":["blades","classless","css","float-label","float-labels","floating-label","floating-labels","pico-css","picocss"],"latest_commit_sha":null,"homepage":"https://blades.ninja/css/float-label/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anyblades.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-10-11T13:19:58.000Z","updated_at":"2026-06-26T01:46:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"f590090b-2667-402d-bca4-c33c28cdfc6c","html_url":"https://github.com/anyblades/float-label-css","commit_stats":null,"previous_names":["tonystar/bootstrap-float-label","anydigital/bootstrap-float-label","tonycorporated/bootstrap-float-label","anydigital/bladeswitch","anyblades/float-label-css"],"tags_count":59,"template":false,"template_full_name":null,"purl":"pkg:github/anyblades/float-label-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anyblades%2Ffloat-label-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anyblades%2Ffloat-label-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anyblades%2Ffloat-label-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anyblades%2Ffloat-label-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anyblades","download_url":"https://codeload.github.com/anyblades/float-label-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anyblades%2Ffloat-label-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35013184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blades","classless","css","float-label","float-labels","floating-label","floating-labels","pico-css","picocss"],"created_at":"2026-06-14T06:00:27.084Z","updated_at":"2026-07-01T16:01:13.825Z","avatar_url":"https://github.com/anyblades.png","language":null,"funding_links":[],"categories":["Generic plugins and extensions"],"sub_categories":[],"readme":"# 🥷 Pure CSS Float Label. Finally classless.\n\n\u003c!--section:summary--\u003e\n\nBulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.\n\n![](https://img.shields.io/github/v/release/anyblades/float-label-css?label=\u0026color=darkslategray\u0026style=for-the-badge\u0026include_prereleases)\n[![](https://img.shields.io/badge/Code-gainsboro?logo=github\u0026logoColor=black\u0026style=for-the-badge)](https://github.com/anyblades/float-label-css)\n[![](https://img.shields.io/github/stars/anyblades/float-label-css?label=Star\u0026labelColor=gainsboro\u0026color=silver\u0026style=for-the-badge)](https://github.com/anyblades/float-label-css)\n\n\u003c!--section:gh-only--\u003e\n\n## [Demo ↗](https://blades.ninja/css/float-label/#demo)\n\n[\u003cimg src=\"float-label-css-v2.gif\" width=\"600\"\u003e](https://blades.ninja/css/float-label/#demo)\n\n\u003c!--section:docs-demo-install--\u003e\n\nExamples:\n\n- [**Pico + *Bl*ades** with Float Label CSS v2 included](https://blades.ninja/css/float-label/#demo)\n- [**Tailwind v4** + Float Label CSS v2](https://codepen.io/tonystar/pen/ALaZrV)\n- [**Float Label CSS v2 only**](https://codepen.io/tonystar/pen/JRLaKw) (no CSS frameworks)\n\n---\n\n## Killer features\n\n- No JS — pure CSS\n- No hacks with `required` and `:valid`  \n  ↳ HTML5 validation support\n- Compatible with `\u003cselect\u003e` and `\u003ctextarea\u003e` fields\n- No need to define `for=\"...\"` attribute on `\u003clabel\u003e`\n- \u003cmark\u003eNEW\u003c/mark\u003e in **v2:** Finally, the text label can be placed BEFORE the input field!\n- \u003cmark\u003eNEW\u003c/mark\u003e in **v2:** Class-less!\n\n\u003c!--section:gh-only--\u003e\n\n---\n\n## [Install ↗](https://blades.ninja/css/standalone/)\n\n\u003c!--section:docs--\u003e\n\n---\n\n## Usage\n\nSimply place `\u003cinput\u003e` inside `\u003clabel\u003e` to enable float label:\n\n```html\n\u003clabel\u003e\n  \u003cspan\u003eEmail\u003c/span\u003e\n  \u003cinput type=\"email\" placeholder=\"email@example.com\" /\u003e\n\u003c/label\u003e\n```\n\n**NOTE:** W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL)!\n\n\u003cdiv\u003e\u003chr\u003e\u003c/div\u003e\n\nAlternatively wrap `\u003clabel\u003e` and `\u003cinput\u003e` inside `.has-float-label`:\n\n```html\n\u003cdiv class=\"has-float-label\"\u003e\n  \u003clabel for=\"email\"\u003eEmail\u003c/label\u003e\n  \u003cinput id=\"email\" type=\"email\" placeholder=\"email@example.com\" /\u003e\n\u003c/div\u003e\n```\n\n**NOTE**: `for=\"...\"` attribute is required on `\u003clabel\u003e` in this case\n\n---\n\n## Credits\n\n- [Matt D. Smith](https://x.com/mds) for [original pattern](https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction)\n- Emil Björklund for [`:placeholder-shown`](https://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/)\n- [Anton Staroverov](https://x.com/AntonStarovero_) for [`:has(*:placeholder-shown:not(:focus)) label`](https://blades.ninja/css/float-label/#how)\n  - to finally support labels before input fields\n  - instead of [`input:focus + label`](https://css-tricks.com/float-labels-css/) used previously\n\n---\n\n## Browser support\n\nAny browser with https://caniuse.com/css-placeholder-shown, https://caniuse.com/css-has and https://caniuse.com/css-nesting.\n\nAll non-supporting browsers should gracefully fall-back to the default layout.\n\n=\u003e Can be used in ANY browser _as is_!\n\n---\n\nFeatured by:\n\n- https://github.com/dbohdan/classless-css\n- https://github.com/pryley/float-labels.js\n- https://github.com/uptonking/note4yaoo/blob/main/toc/toc-lib-css-only.md#css-tools\n- https://github.com/bcgov/moh-fpcare `package.json`\n\n\u003c!--section:gh-only--\u003e\n\n---\n\n## PS: [How it works?](https://blades.ninja/css/float-label/#how)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanyblades%2Ffloat-label-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanyblades%2Ffloat-label-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanyblades%2Ffloat-label-css/lists"}