This is a little specific… but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling to active inputs with :active. That’s useful… and we’ve covered how to do both input and label highlighting before. But now we need go one step up and highlight the current form itself.
This article is pretty old. You’d probably just use :focus-within
these days.

HTML
Three blocks, each with a form:
<div class="login-block">
<h3>Sharepoint Login</h3>
<form action="#" method="post" target="_blank">
<p><label for="sharepoint-company-name">Company</label><input type="text" name="sharepoint-company-name" id="sharepoint-company-name" /></p>
<p><label for="sharepoint-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
<p><label for="sharepoint-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
<p class="submit-wrap"><input type="submit" id="sharepoint-submit" class="button" value="Login" /></p>
</form>
</div>
<div class="login-block">
<h3>FTP Login</h3>
<form action="#" method="post" target="_blank">
<p><label for="ftp-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
<p><label for="ftp-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
<p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
</form>
</div>
<div class="login-block last">
<h3>Secret Area Login</h3>
<form action="#" method="post" target="_blank">
<p><label for="secret-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
<p><label for="secret-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
<p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
</form>
</div>
CSS
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.
.login-block {
float:left;
margin:0 49px 25px 0;
text-align:center;
width:260px;
}
.login-block form {
-moz-border-radius:15px 15px 15px 15px;
-moz-box-shadow:0 0 10px #333333;
border:3px solid white;
padding:20px;
}
.login-block .active-form {
border-color:#d09e6d;
}
jQuery JavaScript
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. 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.
$(function() {
var $forms = $("form");
$forms.focusin(function() {
$forms.removeClass("active-form");
$(this).addClass("active-form");
});
});
Demo
Note that uses an ancient version of jQuery. Newer versions don’t support that focusin
usage directly.
Interesting idea. Thanks for sharing :)
An alternative to .parent().parent() in this context is .closest(‘form’) – it ascends the DOM tree and returns the first matching element to the selector (in this case ‘form’).
Ah, thanks, very nice. I would use this except an even more perfect idea was discovered below.
But in IE…..
It’s fine in IE. IE 6 has some formatting issues (you’ll need to use class name instead of attribute selectors) and IE 7 doesn’t support the rounded corners or shadows, but they both support the active form highlighting which is the point of this.
As Ben said, .closest('form') will be better here.
But jQuery 1.4 has new focusin event, that is focus that bubbles up the DOM tree, so can be delegated (and triggered on a form itself).
So the code like this should work:
$('form').bind('focusin focusout', function(){
$(this).toggleClass("active-form");
});
Awesome
Thanks! This is ideal. I have updated the article and download. I went with this:
I’m glad I could help.
And, BTW, you could add some CSS love for webkit browsers in demo, too ;)
Not only webkit browsers. Opera 10.50 supports both
border-radius
andbox-shadow
Obvious form is obvious. :P
I like it, but I’m finding myself naturally expecting to gain focus on a form when I click any part of a form’s block, not just inside a text field (or other form element).
Maybe an improvement (albeit a pretty minor one) would be a hover event to imply a form is click-able, then an onclick event that sets the sets focus to a clicked form.
-Theo
+1 for this idea !
cursor:pointer on the form-element. and on click() trigger the focus aswell, just like input:focus would do.
So we have a form that changes its border when it receives focus. Welcome to 1998.
Very useful, thank you for sharing!
Yes indeed, a very specific post pertaining to highlighting an authentication box on focus. This is a great starting point to develop an Area 51 ninja-style authorization gateway.
@bill: Try this one – The Konami Code on buysellads.com. Get the hint.
just a heads up…the labels on the second login box activate the input boxes on the first…not relevant to the post but just an fyi ;)
Thanks Jack, fixed demo and download again. The problem was the “name” attributes on the inputs were jumbled due to clumsy copying and pasting.
But that brings up an interesting thing, the .focusin command works for label clicks to, which is pretty cool.
Simple CSS make the same work. :focus and descendence.
Forms are parents of inputs, not descendants. Can’t move “up” the tree in CSS.
Hey, nice article chris. how about some php to go with this to make it usable? I would love a password screen to protect a few pages.
Why not just natively use CSS..?
Show us how.
This tutorial has just give me some idea… thanks.
Thanks Chris!
Very useful, thank you!
Nicely explained and very useful tutorial for login form. Thanks for share this Chris. :)
Not sure where this would be helpful…
Could you not do this using form:focus?
Could you try someday to make a tutorial for a login form using somehow a lightbox?
I hope u understand what i mean, so as if the user click on a login link the login box with user and password would poput inside a lightbox.
Will try to do the same stuff using CSS only. Also, I think input’s onBlur event should make highlighted active form inactive.
Great idea! Not too difficult to execute either.
I am hoping you can help. I am looking to find a way to create a contact form where users can send e-mails to multiple e-mail addresses…I envision a drop-down list which is essentially a list of e-mail addresses. So a user fills out the form then select’s an e-mail from the drop-down and once submitted it would go to the chosen e-mail address. Any idea where I can find more info. Thanks a lot. Keep up the great work.