├── README.md ├── floating-labels.css ├── floating-labels.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap floating labels 2 | ========================= 3 | 4 | A new placeholder UI design for Bootstrap forms. 5 | Inspired by Mark D. Smith's 6 | [Dribbble post](http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users) 7 | and @jverdi's [JVFloatLabeledTextField](https://github.com/jverdi/JVFloatLabeledTextField). 8 | 9 | Requirements 10 | ------------ 11 | * Bootstrap 3.0 12 | * jQuery 1.10.x or later 13 | * Taste 14 | 15 | Usage 16 | ----- 17 | Just include `floating-labels.css` and `floating-labels.js`, then add the 18 | `floating-label-form-group` class to any `form-group`s you want to attach 19 | the behaviour to. 20 | 21 | Example 22 | ----- 23 |

24 | Password 25 | 26 |

27 | 28 | Should work anywhere Bootstrap works. 29 | -------------------------------------------------------------------------------- /floating-labels.css: -------------------------------------------------------------------------------- 1 | .floating-label-form-group { 2 | border-bottom: 1px solid #ccc; 3 | margin-bottom: 0; 4 | position: relative; 5 | padding-bottom: 0.5em; 6 | } 7 | 8 | .floating-label-form-group input, 9 | .floating-label-form-group textarea { 10 | background: none; 11 | border: none; 12 | border-radius: 0; 13 | padding-left: 0; 14 | padding-right: 0; 15 | box-shadow: none !important; 16 | position: relative; 17 | z-index: 1; 18 | font-size: 1.5em; 19 | resize: none; 20 | } 21 | 22 | .floating-label-form-group label { 23 | display: block; 24 | position: relative; 25 | top: 2em; 26 | opacity: 0; 27 | z-index: 0; 28 | font-size: 0.85em; 29 | line-height: 1.764705882em; 30 | vertical-align: middle; 31 | vertical-align: baseline; 32 | margin: 0; 33 | -webkit-transition: top 0.5s ease, opacity 0.5s ease; 34 | -moz-transition: top 0.5s ease, opacity 0.5s ease; 35 | -ms-transition: top 0.5s ease, opacity 0.5s ease; 36 | transition: top 0.5s ease, opacity 0.5s ease; 37 | } 38 | 39 | .floating-label-form-group:not(:first-child) { 40 | border-left: 1px solid #ccc; 41 | padding-left: 14px; 42 | } 43 | 44 | .floating-label-form-group-with-value label { 45 | top: 0; 46 | opacity: 1; 47 | } 48 | 49 | .floating-label-form-group-with-focus label { 50 | color: blue; 51 | } 52 | 53 | form .row:first-child .floating-label-form-group { 54 | border-top: 1px solid #ccc; 55 | } 56 | -------------------------------------------------------------------------------- /floating-labels.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $("body").on("input propertychange", ".floating-label-form-group", function(e) { 3 | $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val()); 4 | }).on("focus", ".floating-label-form-group", function() { 5 | $(this).addClass("floating-label-form-group-with-focus"); 6 | }).on("blur", ".floating-label-form-group", function() { 7 | $(this).removeClass("floating-label-form-group-with-focus"); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | Bootstrap floating labels 22 | 23 | 24 | 25 |

26 |

Bootstrap floating labels

27 |

Inspired by Matt D. Smith

28 | 29 | 30 | 54 |

55 | 56 | --------------------------------------------------------------------------------