{"id":13656525,"url":"https://github.com/anydigital/float-label-css","last_synced_at":"2025-04-09T14:12:15.946Z","repository":{"id":57238547,"uuid":"70344882","full_name":"anydigital/float-label-css","owner":"anydigital","description":"Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.","archived":false,"fork":false,"pushed_at":"2023-10-03T04:51:57.000Z","size":693,"stargazers_count":262,"open_issues_count":14,"forks_count":28,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-02T07:57:21.286Z","etag":null,"topics":["css","css-only","css3","floating-labels","pure-css","purecss"],"latest_commit_sha":null,"homepage":"https://codepen.io/tonystar/pen/JRLaKw","language":"HTML","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/anydigital.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}},"created_at":"2016-10-08T16:48:13.000Z","updated_at":"2024-11-12T02:23:03.000Z","dependencies_parsed_at":"2024-01-15T20:52:05.742Z","dependency_job_id":"38a7dc1e-faa3-4315-81fb-e9d510878116","html_url":"https://github.com/anydigital/float-label-css","commit_stats":null,"previous_names":["tonystar/float-label-css"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anydigital%2Ffloat-label-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anydigital%2Ffloat-label-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anydigital%2Ffloat-label-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anydigital%2Ffloat-label-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anydigital","download_url":"https://codeload.github.com/anydigital/float-label-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054195,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","css-only","css3","floating-labels","pure-css","purecss"],"created_at":"2024-08-02T05:00:22.580Z","updated_at":"2025-04-09T14:12:15.903Z","avatar_url":"https://github.com/anydigital.png","language":"HTML","readme":"Pure-CSS Float Label. Finally.\n==============================\n\n[![CDNJS](https://img.shields.io/cdnjs/v/float-label-css.svg)](https://cdnjs.com/libraries/float-label-css)\n[![npm version](https://img.shields.io/npm/v/float-label-css.svg)](https://www.npmjs.com/package/float-label-css)\n[![retweet](https://img.shields.io/badge/re-tweet-00bfff.svg)](https://twitter.com/tonystarring/status/787217405827317762)\n[![dribbble](https://img.shields.io/badge/dribbble-%E2%99%A5-ff1493.svg)](https://dribbble.com/shots/3018466-Float-Label-CSS-only)\n[![codepen](https://img.shields.io/badge/code-pen-d3d3d3.svg)](https://codepen.io/tonystar/pen/JRLaKw)\n\n\u003e Now hosted on [CDNJS](https://cdnjs.com/libraries/float-label-css)! • And shipped with [Bootstrap Kit](https://bootstrap-kit.com/)!\n\nBulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.\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`! \u003csup\u003e**v1.0.1+**\u003c/sup\u003e\n\n\u003cimg src=\"https://cdn.rawgit.com/tonystar/float-label-css/9dd8582/float-label-css.gif\" width=\"400\"/\u003e\n\n\n## Demo\n\n* [No-dependencies demo](https://codepen.io/tonystar/pen/JRLaKw)\n* [Bootstrap 3 demo](https://codepen.io/tonystar/pen/ALaZrV)\n* [Bootstrap 4 demo](https://codepen.io/tonystar/pen/LRdpYZ)\n\n\n## Usage\n\nInclude `float-label.min.css`:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.rawgit.com/tonystar/float-label-css/v1.0.2/dist/float-label.min.css\"/\u003e\n```\n\nUse `\u003clabel\u003e` with `.has-float-label` class as a wrapper for `\u003cinput\u003e` \u003csup\u003e**v1.0.1+**\u003c/sup\u003e:\n```html\n\u003clabel class=\"has-float-label\"\u003e\n  \u003cinput type=\"email\" placeholder=\"email@example.com\"/\u003e\n  \u003cspan\u003eEmail\u003c/span\u003e\n\u003c/label\u003e\n```\n**NOTE**:\n\n1. W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL).\n2. `\u003cspan\u003e` should go after `\u003cinput\u003e`.\n\n***\n\nAlternatively wrap `\u003cinput\u003e` and `\u003clabel\u003e` by `.has-float-label`:\n```html\n\u003cdiv class=\"has-float-label\"\u003e\n  \u003cinput id=\"email\" type=\"email\" placeholder=\"email@example.com\"/\u003e\n  \u003clabel for=\"email\"\u003eEmail\u003c/label\u003e\n\u003c/div\u003e\n```\n**NOTE**:\n\n1. W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL) as well.\n2. `\u003clabel\u003e` should go after `\u003cinput\u003e`.\n3. `for=\"...\"` attribute is required on `\u003clabel\u003e`.\n\n\n### Quick use: Bootstrap\n\nInstead of `float-label.min.css` just include pre-built `bootstrap-float-label.min.css`:\n```html\n\u003c!-- Bootstrap v4 --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css\"/\u003e\n\n\u003c!-- Bootstrap v3 --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.0/dist/bootstrap-float-label.min.css\"/\u003e\n```\n\nMarkup is the same. For more details see: https://github.com/tonystar/bootstrap-float-label.\n\n\n## Credits\n\n* [@mds](https://twitter.com/mds) for the [original pattern](http://mds.is/float-label-pattern/)\n* [@chriscoyier](https://twitter.com/chriscoyier) for the [`input:focus + label`](https://css-tricks.com/float-labels-css/)\n* [@thatemil](https://twitter.com/thatemil) for the [`:placeholder-shown`](https://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/)\n\n\n## Browser support\n\nAny browser with `:placeholder-shown` CSS pseudo-class: http://caniuse.com/#feat=css-placeholder-shown.\n\nAll non-supporting browsers will fall back to the static layout (w/o animation).\n\n=\u003e Can be used in ANY browser *as is*!\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanydigital%2Ffloat-label-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanydigital%2Ffloat-label-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanydigital%2Ffloat-label-css/lists"}