Copyright 2012 Mendeley Ltd. Licensed under the Apache License, Version 2.0
Big thanks to @AndrewOfficer and @subcide, of the Mendeley UX team, for design input and advice.
A simple jQuery plugin, originally developed for the Mendeley website, to
- implement consistent HTML5 input (text/password) placeholder hinting behaviour across all major browsers, including IE 7+! (Note that having a placeholder value is optional)
- apply beautiful CSS3 styling such as border-radius and box-shadow on the inputs. Sorry, IE users will not get those lovely rounded corners.
Visit https://www.mendeley.com/join/ or http://seewah.blogspot.com/2011/12/shinyfield-placeholder-jquery-plugin.html to see this plugin in action!
See demo.html for the a basic example of how to use this plugin. Simply load both the jQuery js and the ShinyField js, as well as the ShinyField css, in the "head" section of the html, and then invoke .shinify() on the relevant elements inside the "document.ready" handler.
wrapperId, wrapperClass, hintSpanId, hintSpanClass for assigning various ids and classes to the generated elements.
E.g. $("#my-input").shinify({"wrapperId": "my-special-wrapper"});
Every look-and-feel aspect of this plugin can be customized via CSS. Here are some common examples:
- to change input box dimensions (default is 292px by 36px, with 10px by 8px "inner padding"):
.shiny-field-wrapper { width: 100px; height: 24px; }
.shiny-field-wrapper input { margin: 5px; width: 90px; font-size: 11px; } /* note that you need to override MARGIN here */
.shiny-field-hint { padding: 5px; width: 90px; font-size: 11px; } /* note that you need to override PADDING here */
- to change the "in focus" border colour:
.shiny-field-wrapper.in-focus { border-color: red; }