Grow your CSS skills. Land your dream job.

Multiple Login Forms with Highlighting

Published by Chris Coyier

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.

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");
    });
});

Hey, does anyone know if there is a better way to write .parent().parent()?

Demo and Download

View Demo   Download Files

Comments

  1. Permalink to comment#

    Interesting idea. Thanks for sharing :)

  2. Permalink to comment#

    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’).

  3. Permalink to comment#

    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.

  4. Permalink to comment#

    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).

    • Permalink to comment#

      So the code like this should work:

      $('form').bind('focusin focusout', function(){
      $(this).toggleClass("active-form");
      });

    • Daniel
      Permalink to comment#

      Awesome

    • Thanks! This is ideal. I have updated the article and download. I went with this:

      $(function() {
          var $forms = $("form");
          $forms.focusin(function() {
              $forms.removeClass("active-form");
              $(this).addClass("active-form");
          });
      });
    • Permalink to comment#

      I’m glad I could help.

      And, BTW, you could add some CSS love for webkit browsers in demo, too ;)

    • Permalink to comment#

      Not only webkit browsers. Opera 10.50 supports both border-radius and box-shadow

  5. Brian
    Permalink to comment#

    Obvious form is obvious. :P

  6. Theo Mills
    Permalink to comment#

    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

    • TeMc
      Permalink to comment#

      +1 for this idea !

      cursor:pointer on the form-element. and on click() trigger the focus aswell, just like input:focus would do.

  7. bill
    Permalink to comment#

    So we have a form that changes its border when it receives focus. Welcome to 1998.

  8. Very useful, thank you for sharing!

  9. 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.

  10. jack
    Permalink to comment#

    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.

  11. Simple CSS make the same work. :focus and descendence.

  12. jamie
    Permalink to comment#

    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.

  13. Why not just natively use CSS..?

  14. Permalink to comment#

    This tutorial has just give me some idea… thanks.

  15. Thanks Chris!

  16. Very useful, thank you!

  17. Nicely explained and very useful tutorial for login form. Thanks for share this Chris. :)

  18. Not sure where this would be helpful…

    Could you not do this using form:focus?

  19. Permalink to comment#

    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.

  20. Permalink to comment#

    Will try to do the same stuff using CSS only. Also, I think input’s onBlur event should make highlighted active form inactive.

  21. Permalink to comment#

    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.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".