├── float-label-css.gif
├── koala-config.json
├── package.json
├── scss
    ├── _mixins.scss
    └── float-label.scss
├── LICENSE
├── dist
    ├── float-label.min.css
    └── float-label.css
├── index.html
└── README.md


/float-label-css.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anydigital/float-label-css/HEAD/float-label-css.gif


--------------------------------------------------------------------------------
/koala-config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "mappings": [
3 |     {
4 |       "src": "scss",
5 |       "dest": "dist"
6 |     }
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "float-label-css",
 3 |   "version": "1.0.2",
 4 |   "description": "Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/tonystar/float-label-css.git"
 8 |   },
 9 |   "keywords": [
10 |     "float-label",
11 |     "css-only"
12 |   ],
13 |   "author": "Anton Staroverov (https://tonystar.me)",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/tonystar/float-label-css/issues"
17 |   },
18 |   "homepage": "https://github.com/tonystar/float-label-css#readme"
19 | }
20 | 


--------------------------------------------------------------------------------
/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin float-label-container {
 2 |   display: block;
 3 |   position: relative;
 4 | }
 5 | 
 6 | @mixin float-label {
 7 |   label, > span {
 8 |     position: absolute;
 9 |     left: 0;
10 |     top: 0;
11 |     cursor: text;
12 |     font-size: 75%;
13 |     opacity: 1;
14 |     transition: all .2s;
15 |     @content;
16 |   }
17 | }
18 | 
19 | @mixin float-label-input {
20 |   &::placeholder {
21 |     opacity: 1;
22 |     transition: all .2s;
23 |   }
24 |   &:placeholder-shown:not(:focus)::placeholder {
25 |       opacity: 0;
26 |   }
27 | }
28 | 
29 | @mixin float-label-scaled {
30 |   &:placeholder-shown:not(:focus) + * {
31 |       font-size: 150%;
32 |       opacity: .5;
33 |       @content;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/scss/float-label.scss:
--------------------------------------------------------------------------------
 1 | @import "mixins";
 2 | 
 3 | .has-float-label {
 4 |   @include float-label-container;
 5 | 
 6 |   @include float-label;
 7 | 
 8 |   select {
 9 |     -webkit-appearance: none;
10 |        -moz-appearance: none;
11 |             appearance: none;
12 |   }
13 | 
14 |   textarea {
15 |     width: 100%;
16 |   }
17 | 
18 |   input, select, textarea {
19 |     @include float-label-input;
20 |     font-size: inherit;
21 |     padding-top: 1em;
22 |     margin-bottom: 2px;
23 |     border: 0;
24 |     border-radius: 0;
25 |     border-bottom: 2px solid rgba(0,0,0,.1);
26 | 
27 |     @include float-label-scaled {
28 |       top: .25em;
29 |     }
30 | 
31 |     &:focus {
32 |       outline: none;
33 |       border-color: rgba(0,0,0,.5);
34 |     }
35 |   }
36 | 
37 |   select {
38 |     padding-right: 1em;
39 |     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .5em bottom .25em;
40 |     background-size: 8px 10px;
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Anton Staroverov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/dist/float-label.min.css:
--------------------------------------------------------------------------------
1 | .has-float-label{display:block;position:relative}.has-float-label label,.has-float-label>span{position:absolute;left:0;top:0;cursor:text;font-size:75%;opacity:1;-webkit-transition:all .2s;transition:all .2s}.has-float-label select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-float-label textarea{width:100%}.has-float-label input,.has-float-label select,.has-float-label textarea{font-size:inherit;padding-top:1em;margin-bottom:2px;border:0;border-radius:0;border-bottom:2px solid rgba(0,0,0,.1)}.has-float-label input::-webkit-input-placeholder,.has-float-label select::-webkit-input-placeholder,.has-float-label textarea::-webkit-input-placeholder{opacity:1;-webkit-transition:all .2s;transition:all .2s}.has-float-label input::-moz-placeholder,.has-float-label select::-moz-placeholder,.has-float-label textarea::-moz-placeholder{opacity:1;transition:all .2s}.has-float-label input:-ms-input-placeholder,.has-float-label select:-ms-input-placeholder,.has-float-label textarea:-ms-input-placeholder{opacity:1;transition:all .2s}.has-float-label input::placeholder,.has-float-label select::placeholder,.has-float-label textarea::placeholder{opacity:1;-webkit-transition:all .2s;transition:all .2s}.has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder,.has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder,.has-float-label textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder{opacity:0}.has-float-label input:placeholder-shown:not(:focus)::-moz-placeholder,.has-float-label select:placeholder-shown:not(:focus)::-moz-placeholder,.has-float-label textarea:placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}.has-float-label input:placeholder-shown:not(:focus):-ms-input-placeholder,.has-float-label select:placeholder-shown:not(:focus):-ms-input-placeholder,.has-float-label textarea:placeholder-shown:not(:focus):-ms-input-placeholder{opacity:0}.has-float-label input:placeholder-shown:not(:focus)::placeholder,.has-float-label select:placeholder-shown:not(:focus)::placeholder,.has-float-label textarea:placeholder-shown:not(:focus)::placeholder{opacity:0}.has-float-label input:placeholder-shown:not(:focus)+*,.has-float-label select:placeholder-shown:not(:focus)+*,.has-float-label textarea:placeholder-shown:not(:focus)+*{font-size:150%;opacity:.5;top:.25em}.has-float-label input:focus,.has-float-label select:focus,.has-float-label textarea:focus{outline:0;border-color:rgba(0,0,0,.5)}.has-float-label select{padding-right:1em;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .5em bottom .25em;background-size:8px 10px}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8"/>
  5 |   <title>Float Label</title>
  6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
  7 |   <link rel="stylesheet" href="dist/float-label.css"/>
  8 |   <style>
  9 |     * {
 10 |       box-sizing: border-box;
 11 |     }
 12 |     body {
 13 |       position: relative;
 14 |       max-width: 20rem;
 15 |       background: #eee;
 16 |       margin: 2rem auto;
 17 |     }
 18 |     fieldset {
 19 |       padding: 1.5rem;
 20 |       background: white;
 21 |     }
 22 |     input, select {
 23 |       width: 100%;
 24 |       margin-bottom: .5rem;
 25 |     }
 26 |     button {
 27 |       background: #333;
 28 |       color: white;
 29 |       border: 0;
 30 |       padding: .5em 1em;
 31 |       margin-top: 1rem;
 32 |     }
 33 |     a {
 34 |       display: block;
 35 |       padding: 10px;
 36 |       position: absolute;
 37 |       z-index: -1;
 38 |       top: 1rem;
 39 |       left: 100%;
 40 |       margin-left: -65px;
 41 |       transition: all .2s;
 42 |     }
 43 |     a:hover {
 44 |       margin-left: 0;
 45 |     }
 46 |     .input-group {
 47 |       display: table;
 48 |       width: 100%;
 49 |     }
 50 |     .input-group > * {
 51 |       display: table-cell;
 52 |       width: 50%;
 53 |     }
 54 |   </style>
 55 | </head>
 56 | <body>
 57 |   <fieldset>
 58 |     <legend>Sign up</legend>
 59 | 
 60 |     <div class="input-group">
 61 |     <div class="has-float-label">
 62 |       <input id="first" type="text" placeholder="Name"/>
 63 |       <label for="first">First</label>
 64 |     </div>
 65 | 
 66 |     <div class="has-float-label">
 67 |       <input id="last" type="text" placeholder="Surname"/>
 68 |       <label for="last">Last</label>
 69 |     </div>
 70 |     </div>
 71 | 
 72 |     <label class="has-float-label">
 73 |       <input type="email" placeholder="email@example.com"/>
 74 |       <span>Email</span>
 75 |     </label>
 76 | 
 77 |     <label class="has-float-label">
 78 |       <input type="password" placeholder="••••••••"/>
 79 |       <span>Password</span>
 80 |     </label>
 81 | 
 82 |     <div class="input-group">
 83 |     <label class="has-float-label">
 84 |       <select>
 85 |         <option>United States</option>
 86 |         <option>Canada</option>
 87 |       </select>
 88 |       <span>Country</span>
 89 |     </label>
 90 | 
 91 |     <div class="has-float-label">
 92 |       <select id="state">
 93 |         <option>New York</option>
 94 |         <option>Texas</option>
 95 |       </select>
 96 |       <label for="state">State</label>
 97 |     </div>
 98 |     </div>
 99 | 
100 |     <label class="has-float-label">
101 |       <textarea placeholder="No newsletter please!"></textarea>
102 |       <span>Notes</span>
103 |     </label>
104 | 
105 |     <button>Sign up</button>
106 |   </fieldset>
107 | 
108 |   <!---->
109 |   <a href="https://github.com/tonystar/float-label-css" target="_blank">
110 |     <img src="https://img.shields.io/github/stars/tonystar/float-label-css.svg?style=social&label=Star"/>
111 |   </a>
112 | </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/dist/float-label.css:
--------------------------------------------------------------------------------
 1 | .has-float-label {
 2 |   display: block;
 3 |   position: relative;
 4 | }
 5 | .has-float-label label, .has-float-label > span {
 6 |   position: absolute;
 7 |   left: 0;
 8 |   top: 0;
 9 |   cursor: text;
10 |   font-size: 75%;
11 |   opacity: 1;
12 |   -webkit-transition: all .2s;
13 |           transition: all .2s;
14 | }
15 | .has-float-label select {
16 |   -webkit-appearance: none;
17 |   -moz-appearance: none;
18 |   appearance: none;
19 | }
20 | .has-float-label textarea {
21 |   width: 100%;
22 | }
23 | .has-float-label input, .has-float-label select, .has-float-label textarea {
24 |   font-size: inherit;
25 |   padding-top: 1em;
26 |   margin-bottom: 2px;
27 |   border: 0;
28 |   border-radius: 0;
29 |   border-bottom: 2px solid rgba(0, 0, 0, 0.1);
30 | }
31 | .has-float-label input::-webkit-input-placeholder, .has-float-label select::-webkit-input-placeholder, .has-float-label textarea::-webkit-input-placeholder {
32 |   opacity: 1;
33 |   -webkit-transition: all .2s;
34 |           transition: all .2s;
35 | }
36 | .has-float-label input::-moz-placeholder, .has-float-label select::-moz-placeholder, .has-float-label textarea::-moz-placeholder {
37 |   opacity: 1;
38 |   transition: all .2s;
39 | }
40 | .has-float-label input:-ms-input-placeholder, .has-float-label select:-ms-input-placeholder, .has-float-label textarea:-ms-input-placeholder {
41 |   opacity: 1;
42 |   transition: all .2s;
43 | }
44 | .has-float-label input::placeholder, .has-float-label select::placeholder, .has-float-label textarea::placeholder {
45 |   opacity: 1;
46 |   -webkit-transition: all .2s;
47 |           transition: all .2s;
48 | }
49 | .has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder {
50 |   opacity: 0;
51 | }
52 | .has-float-label input:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label textarea:placeholder-shown:not(:focus)::-moz-placeholder {
53 |   opacity: 0;
54 | }
55 | .has-float-label input:placeholder-shown:not(:focus):-ms-input-placeholder, .has-float-label select:placeholder-shown:not(:focus):-ms-input-placeholder, .has-float-label textarea:placeholder-shown:not(:focus):-ms-input-placeholder {
56 |   opacity: 0;
57 | }
58 | .has-float-label input:placeholder-shown:not(:focus)::placeholder, .has-float-label select:placeholder-shown:not(:focus)::placeholder, .has-float-label textarea:placeholder-shown:not(:focus)::placeholder {
59 |   opacity: 0;
60 | }
61 | .has-float-label input:placeholder-shown:not(:focus) + *, .has-float-label select:placeholder-shown:not(:focus) + *, .has-float-label textarea:placeholder-shown:not(:focus) + * {
62 |   font-size: 150%;
63 |   opacity: .5;
64 |   top: .25em;
65 | }
66 | .has-float-label input:focus, .has-float-label select:focus, .has-float-label textarea:focus {
67 |   outline: none;
68 |   border-color: rgba(0, 0, 0, 0.5);
69 | }
70 | .has-float-label select {
71 |   padding-right: 1em;
72 |   background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.5em bottom 0.25em;
73 |   background-size: 8px 10px;
74 | }
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Pure-CSS Float Label. Finally.
 2 | ==============================
 3 | 
 4 | [![CDNJS](https://img.shields.io/cdnjs/v/float-label-css.svg)](https://cdnjs.com/libraries/float-label-css)
 5 | [![npm version](https://img.shields.io/npm/v/float-label-css.svg)](https://www.npmjs.com/package/float-label-css)
 6 | [![retweet](https://img.shields.io/badge/re-tweet-00bfff.svg)](https://twitter.com/tonystarring/status/787217405827317762)
 7 | [![dribbble](https://img.shields.io/badge/dribbble-%E2%99%A5-ff1493.svg)](https://dribbble.com/shots/3018466-Float-Label-CSS-only)
 8 | [![codepen](https://img.shields.io/badge/code-pen-d3d3d3.svg)](https://codepen.io/tonystar/pen/JRLaKw)
 9 | 
10 | > Now hosted on [CDNJS](https://cdnjs.com/libraries/float-label-css)! • And shipped with [Bootstrap Kit](https://bootstrap-kit.com/)!
11 | 
12 | Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
13 | 
14 | * No JS! Pure CSS!
15 | * No hacks with `required` and `:valid`!
16 | * ↳ HTML5 validation support!
17 | * Compatible with `<select>` and `<textarea>` fields!
18 | * No need to define `for="..."` attribute on `<label>`! <sup>**v1.0.1+**</sup>
19 | 
20 | <img src="https://cdn.rawgit.com/tonystar/float-label-css/9dd8582/float-label-css.gif" width="400"/>
21 | 
22 | 
23 | ## Demo
24 | 
25 | * [No-dependencies demo](https://codepen.io/tonystar/pen/JRLaKw)
26 | * [Bootstrap 3 demo](https://codepen.io/tonystar/pen/ALaZrV)
27 | * [Bootstrap 4 demo](https://codepen.io/tonystar/pen/LRdpYZ)
28 | 
29 | 
30 | ## Usage
31 | 
32 | Include `float-label.min.css`:
33 | ```html
34 | <link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/float-label-css/v1.0.2/dist/float-label.min.css"/>
35 | ```
36 | 
37 | Use `<label>` with `.has-float-label` class as a wrapper for `<input>` <sup>**v1.0.1+**</sup>:
38 | ```html
39 | <label class="has-float-label">
40 |   <input type="email" placeholder="email@example.com"/>
41 |   <span>Email</span>
42 | </label>
43 | ```
44 | **NOTE**:
45 | 
46 | 1. W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL).
47 | 2. `<span>` should go after `<input>`.
48 | 
49 | ***
50 | 
51 | Alternatively wrap `<input>` and `<label>` by `.has-float-label`:
52 | ```html
53 | <div class="has-float-label">
54 |   <input id="email" type="email" placeholder="email@example.com"/>
55 |   <label for="email">Email</label>
56 | </div>
57 | ```
58 | **NOTE**:
59 | 
60 | 1. W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL) as well.
61 | 2. `<label>` should go after `<input>`.
62 | 3. `for="..."` attribute is required on `<label>`.
63 | 
64 | 
65 | ### Quick use: Bootstrap
66 | 
67 | Instead of `float-label.min.css` just include pre-built `bootstrap-float-label.min.css`:
68 | ```html
69 | <!-- Bootstrap v4 -->
70 | <link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css"/>
71 | 
72 | <!-- Bootstrap v3 -->
73 | <link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.0/dist/bootstrap-float-label.min.css"/>
74 | ```
75 | 
76 | Markup is the same. For more details see: https://github.com/tonystar/bootstrap-float-label.
77 | 
78 | 
79 | ## Credits
80 | 
81 | * [@mds](https://twitter.com/mds) for the [original pattern](http://mds.is/float-label-pattern/)
82 | * [@chriscoyier](https://twitter.com/chriscoyier) for the [`input:focus + label`](https://css-tricks.com/float-labels-css/)
83 | * [@thatemil](https://twitter.com/thatemil) for the [`:placeholder-shown`](https://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/)
84 | 
85 | 
86 | ## Browser support
87 | 
88 | Any browser with `:placeholder-shown` CSS pseudo-class: http://caniuse.com/#feat=css-placeholder-shown.
89 | 
90 | All non-supporting browsers will fall back to the static layout (w/o animation).
91 | 
92 | => Can be used in ANY browser *as is*!
93 | 


--------------------------------------------------------------------------------