A web component that create a CSS-only floating label for input tags
-
-
Save tracend/0654132d60c2efd01f6c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "float-label", | |
| "version": "0.0.1", | |
| "description": "A web component that create a CSS-only floating label for ```input``` tags", | |
| "authors": [ | |
| "Makis Tracend <makis@makesit.es>" | |
| ], | |
| "license": "MIT", | |
| "keywords": [ | |
| "common", | |
| "component", | |
| "float", | |
| "label", | |
| "polymer", | |
| "web-components" | |
| ], | |
| "repository": { | |
| "type": "git", | |
| "url": "http://gist.github.com/11206510" | |
| }, | |
| "ignore": [ | |
| "node_modules" | |
| ], | |
| "dependencies": { | |
| "platform": "Polymer/platform#~0.2.3", | |
| "polymer": "Polymer/polymer#~0.2.3" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <polymer-element name="float-label" extends="field" attributes="label type name placeholder autocomplete tabindex"> | |
| <link type="text/css" rel="stylesheet" href="./float-label.css"> | |
| <template> | |
| <input type="{{type}}" id="{{id}}" name="{{name}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="{{autocomplete}}"> | |
| <label for="{{id}}">{{label}}</label> | |
| </template> | |
| <script> | |
| Polymer('float-label', { | |
| created: function() { | |
| // this is executed when the tag is inserted | |
| var field = this; | |
| // add class | |
| this.classList.add("float-label"); | |
| } | |
| }); | |
| </script> | |
| </polymer-element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Float-label: Component example</title> | |
| <!-- Importing Web Component's Polyfill --> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/polymer.js"></script> | |
| <!-- Importing Custom Elements --> | |
| <link rel="import" href="component.html"> | |
| <!-- Example styles --> | |
| <style> | |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| input { | |
| margin-bottom: 10px; | |
| width: 300px; | |
| color: #5f5f5f; | |
| border: 1px solid #ccc; | |
| padding: 0; | |
| text-indent: 1rem; | |
| font-size: 1.25rem; | |
| text-align: left; | |
| background: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Using Custom Elements --> | |
| <field is="float-label" label="Your name" type="text" id="name" name="name" placeholder="Your name" tabindex="1"></field> | |
| <field is="float-label" label="City or town" type="text" id="city" name="city" placeholder="City" tabindex="2"></field> | |
| <field is="float-label" label="Phone" type="tel" id="phone" name="phone" placeholder="Phone" tabindex="3"></field> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Float label</title> | |
| <link type="text/css" href="float-label.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| input { | |
| margin-bottom: 10px; | |
| width: 300px; | |
| color: #5f5f5f; | |
| border: 1px solid #ccc; | |
| padding: 0; | |
| text-indent: 1rem; | |
| font-size: 1.25rem; | |
| text-align: left; | |
| background: #fff; | |
| } | |
| </style> | |
| </head> | |
| <form> | |
| <field class="float-label"> | |
| <input type="text" id="name" name="name" placeholder="Your name" tabindex="1"> | |
| <label for="name">Your name</label> | |
| </field> | |
| <field class="float-label"> | |
| <input type="text" id="city" name="city" placeholder="City" tabindex="2"> | |
| <label for="city">City or town</label> | |
| </field> | |
| <field class="float-label"> | |
| <input type="tel" id="phone" name="phone" placeholder="Phone" tabindex="3"> | |
| <label for="phone">Phone</label> | |
| </field> | |
| </form> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .float-label { | |
| position: relative; | |
| display: block; | |
| } | |
| .float-label label { | |
| position: absolute; | |
| top: 5px; | |
| left: 1em; | |
| font-size: .8rem; | |
| opacity: 0; | |
| } | |
| .float-label input[type='text'], .float-label input[type='email'], .float-label input[type='tel'], .float-label input[type='password'] { | |
| height: 2.5rem; | |
| vertical-align: baseline; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| outline: none; | |
| } | |
| .float-label input, .float-label label { | |
| -webkit-transition: 0.2s ease-in-out; | |
| -moz-transition: 0.2s ease-in-out; | |
| -o-transition: 0.2s ease-in-out; | |
| transition: 0.2s ease-in-out; | |
| } | |
| .float-label input:focus + label { | |
| opacity: 1; | |
| display: inline-block; | |
| height: 10px; | |
| padding-bottom: 5px; | |
| color: #ccc; | |
| } | |
| .float-label input:focus { | |
| padding-top: 20px; | |
| } | |
| .float-label input:focus::-webkit-input-placeholder { | |
| opacity: 0; | |
| } | |
| .float-label input:focus:-moz-placeholder { | |
| opacity: 0; | |
| } | |
| .float-label input:focus::-moz-placeholder { | |
| opacity: 0; | |
| } | |
| .float-label input:focus:-ms-input-placeholder { | |
| opacity: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment