https://github.com/adamculpepper/pure-css-float-labels

Pure CSS Float Labels with Bootstrap5 and Select2 support
https://github.com/adamculpepper/pure-css-float-labels

bootstrap4 bootstrap5 css css-only float-label float-label-pattern float-labels floating-labels form-select pure-css pure-css3 purecss select2

Last synced: about 2 months ago
JSON representation

Pure CSS Float Labels with Bootstrap5 and Select2 support

• Host: GitHub
• URL: https://github.com/adamculpepper/pure-css-float-labels
• Owner: adamculpepper
• License: mit
• Created: 2020-01-10T16:44:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-04-16T18:36:59.000Z (over 3 years ago)
• Last Synced: 2024-07-01T01:58:11.882Z (3 months ago)
• Topics: bootstrap4, bootstrap5, css, css-only, float-label, float-label-pattern, float-labels, floating-labels, form-select, pure-css, pure-css3, purecss, select2
• Language: CSS
• Homepage: https://floatlabels.com
• Size: 68.4 KB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# Pure CSS Float Labels

Float Labels for [Bootstrap4](https://getbootstrap.com) (with support for ``, ``, `` and [Select2](https://select2.org))

## Features

- Pure CSS only Float Labels

- Support for ``, `` and `` elements

- Support for `[disabled]` and `[readonly]` attributes

- Support for [Select2](https://select2.org) (with some JS needed to be added)

- Error handling for missing needed tags and attributes

## TODO

- ~~get `` elements working~~

- ~~create demo site~~

- ~~get normal `` elements working 100%~~

- error handling for [Select2](https://select2.org) missing 'placeholder' attribute or 'label' tag

- support for clearing the [Select2](https://select2.org) value using jQuery (doesn't trigger change event this way)

Original Float Label pattern creator: https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction