Thursday, December 29, 2011

ShinyField - a placeholder jQuery plugin

A simple jQuery plugin, originally developed for the Mendeley website, to

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.

ShinyField source and download on GitHub

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.

No comments: