<div class=\"login-block\">\n <h3>Sharepoint Login<\/h3>\n <form action=\"#\" method=\"post\" target=\"_blank\">\n <p><label for=\"sharepoint-company-name\">Company<\/label><input type=\"text\" name=\"sharepoint-company-name\" id=\"sharepoint-company-name\" \/><\/p>\n <p><label for=\"sharepoint-user-name\">User Name<\/label><input type=\"text\" name=\"ftp-user-name\" id=\"ftp-user-name\" \/><\/p>\n <p><label for=\"sharepoint-password\">Password<\/label><input type=\"password\" name=\"ftp-password\" id=\"ftp-password\" \/><\/p>\n <p class=\"submit-wrap\"><input type=\"submit\" id=\"sharepoint-submit\" class=\"button\" value=\"Login\" \/><\/p>\n <\/form>\n<\/div>\n\n<div class=\"login-block\">\n <h3>FTP Login<\/h3>\n <form action=\"#\" method=\"post\" target=\"_blank\">\n <p><label for=\"ftp-user-name\">User Name<\/label><input type=\"text\" name=\"ftp-user-name\" id=\"ftp-user-name\" \/><\/p>\n <p><label for=\"ftp-password\">Password<\/label><input type=\"password\" name=\"ftp-password\" id=\"ftp-password\" \/><\/p>\n <p class=\"submit-wrap\"><input type=\"submit\" id=\"ftp-submit\" class=\"button\" value=\"Login\" \/><\/p>\n <\/form>\n<\/div>\n\n<div class=\"login-block last\"> \n <h3>Secret Area Login<\/h3>\n <form action=\"#\" method=\"post\" target=\"_blank\">\n <p><label for=\"secret-user-name\">User Name<\/label><input type=\"text\" name=\"ftp-user-name\" id=\"ftp-user-name\" \/><\/p>\n <p><label for=\"secret-password\">Password<\/label><input type=\"password\" name=\"ftp-password\" id=\"ftp-password\" \/><\/p>\n <p class=\"submit-wrap\"><input type=\"submit\" id=\"ftp-submit\" class=\"button\" value=\"Login\" \/><\/p>\n <\/form>\n<\/div><\/code><\/pre>\n\n\nCSS<\/h3>\n\n\n
The CSS isn’t particularly interesting. The forms themselves have a white border around them, and we set up a class that has a colored border. That class will be applied and removed with JavaScript, properly keeping style information out of JavaScript.<\/p>\n\n\n\n
.login-block {\n float:left;\n margin:0 49px 25px 0;\n text-align:center;\n width:260px;\n}\n\n.login-block form {\n -moz-border-radius:15px 15px 15px 15px;\n -moz-box-shadow:0 0 10px #333333;\n border:3px solid white;\n padding:20px;\n}\n\n.login-block .active-form {\n border-color:#d09e6d;\n}<\/code><\/pre>\n\n\njQuery JavaScript<\/h3>\n\n\n
The bit that makes this “work” is here. When an input is focused, it removes highlighting from all forms on the site, and adds it back to the form which contains this newly-focused input.<\/span> Thanks to bartaz for pointing out that jQuery 1.4 now supports “focusin” and “focusout” events for forms, which fire when any input inside them is active. We can watch for that. When focusin fires, we’ll remove highlighting from all forms and add it back to the one that just fired the event.<\/p>\n\n\n\n$(function() {\n var $forms = $(\"form\");\n $forms.focusin(function() {\n $forms.removeClass(\"active-form\");\n $(this).addClass(\"active-form\");\n });\n});<\/code><\/pre>\n\n\nDemo<\/h3>\n\n\n