ShinyField - a placeholder jQuery plugin
A simple jQuery plugin, originally developed for the Mendeley website, to
Customization examples
Every look-and-feel aspect of this plugin can be customized via CSS. Here are some common examples:
1) To change the dimensions of the input (default is 292px by 36px, with 10px by 8px "inner padding")
2) To change "in focus" border colour
Special thanks to @AndrewOfficer and @subcide, of the Mendeley UX team, for design input and advice.
1) implement consistent HTML5 input (text/password) placeholder hinting behaviour across all major browsers, including IE 7+! (Note that having a placeholder value is optional)
2) apply beautiful CSS3 styling such as border-radius and box-shadow on the inputs. Sorry, IE users will not get those lovely rounded corners.
Live demo (html source):
Turns
into
Turns
into
Customization examples
Every look-and-feel aspect of this plugin can be customized via CSS. Here are some common examples:
1) To change the dimensions of the input (default is 292px by 36px, with 10px by 8px "inner padding")
// JS
$("input[name=pretty-text-example1]").shinify({"wrapperId": "example1"});
// CSS
#example1 { width: 100px; height: 24px; }
#example1 input { margin: 5px; width: 90px; font-size: 11px; } /* note that you have to override MARGIN here */
#example1 .shiny-field-hint { padding: 5px; width: 90px; font-size: 11px; } /* note that you have to override PADDING here */
2) To change "in focus" border colour
// JS
$("input[name=pretty-text-example2]").shinify({"wrapperId": "example2"});
// CSS
#example2.in-focus { border-color: red; }
Special thanks to @AndrewOfficer and @subcide, of the Mendeley UX team, for design input and advice.
Comments