Sliding Labels Using MooTools

By on  

A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either!


<form action="" method="post" id="info">
	<h2>Contact Information</h2>
    <div id="name-wrap" class="slider">
        <label for="name">Name</label>
        <input type="text" id="name" name="name">


    <div id="email-wrap"  class="slider">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />

    <div id="street-wrap"  class="slider">
        <label for="st">Street</label>

        <input type="text" id="st" name="st" />

    <div id="city-wrap"  class="slider">
        <label for="city">City & State</label>
        <input type="text" id="city" name="city" />

    <div id="zip-wrap"  class="slider">

        <label for="zip">Zip code</label>
        <input type="text" id="zip" name="zip" />

    <input type="submit" id="btn" name="btn" value="submit" />

A simple form with DIVs wrapping labels and inputs. This probably looks like many of your forms.


div.slider  { clear:both; position:relative; margin:0 0 10px; }
label  { cursor:pointer; display:block; }

The most important CSS snippet is the ensuring the spacing and position value for the slider DIV.

The MooTools JavaScript

//when the dom is ready...
window.addEvent('domready',function() {
	//a few settings
	var labelColor = '#999', restingPosition = 5;
	//for every form field
	$$('form#info .slider label').each(function(label){
		//set the label enhancements into place
			color: labelColor,
			position: 'absolute',
			top: 6,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				else {
					label.setStyle('left',0 - move);
			blur: function() {
				if(input.get('value') == ''){

We start by grabbing all of the labels, absolute-izing their position, and grabbing each label's respective INPUT element. We calculate the width of the label, put together the moving width, and then add INPUT event listeners into place. That's it!

All credit goes to CSSKarma for the awesome idea. I don't recommend this effect for long forms -- the effect will probably become annoying quickly. Short forms are perfect candidates for this effect because the effect limited in use.

Track.js Error Reporting

Recent Features

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos


  1. Please, do the same, but for jQuery :)

  2. Tiago Pereira

    @Anton : If you follow the first link, you’ll find the jQuery version.

  3. Hey David, Glad you liked my sliding labels! Thanks for making the MooTools version!

  4. @Tim Wright: Yeah man, great job — totally unique!

  5. We also had seen the CSSKarma article and we have also adapted it to mootools. We did the same thing but because of the limited space, the labels slide without living the input and fade out on blur if the input is filled.

    Here is the result:

  6. I don’t necessarily love it or hate it, but the concept is great!

  7. I’d use cursor:text instead of cursor:pointer for the label and change it in the complete event of the Fx…
    Anyhow, I like it :)

  8. Guido

    Nice script,

    but it doesn’t work with a multi line texfield.
    How can i do that?

  9. CBloss

    This is very interesting concept! The only thing that one has to be careful on is if the label slides too far over to one side and the user can’t read it. The way that Enric used it, though was smart and eliminates that problem.

  10. Martin

    Very nice,

    Though safaris autofill messes it up a bit.

  11. Guido

    @Martin: Yes it does, but is it still very nice!

  12. Now this I really like

  13. deef

    Very fresh approach to forms, great!

  14. Nice stuff David,
    I must say that I like the way that @Enric has done something similar but sliding the label to the right of the field.

    I have done a test with your code, adjusting it to do this (ie slide it to the right) by getting the width of the form field and using that rather than the “0” that you use.

    To do this I got the field width like this:


    Then replaced these lines:

    label.tween('left',0 - move);

    with this:

    label.tween('left',fieldWidth - move);

    To get this to work with all fields, you could adjust the code to either add conditions for each field type or, rather than getting the input fields by using “getNext” as David’s demo code does, you could use the “for” attribute which relates each label with it’s corresponding form field.

    change this line:

    var input = label.getNext('input')

    to this:

    var input = $(''+label.get('for')+'');

    Of course, this might not work well on select lists…

  15. That’s good stuff, do you have a class version or shall I?

  16. @Ryan Florence: I’m working on one now. Stay tuned.

  17. When i see i laugh too to see the effect, no one can think this type of unique concept, i am fan of this demo. please letme more scripts of these laughing, awesome and unique tricks..

  18. Very nice script and too cool !!!!

    I really like it…..

  19. Very nice script and too cool !!!!

    I really like it…..

  20. Great little script, gonna have to use it some how ..:)

  21. TeddyK


    This site is absolutely great! Many cool things. I am very, very “fresh” to designing and developing and I would love to use this tool in my smarty templates but can’t seem to get the label things right. I’m using socialengine. I hope this is an appropriate place to ask about this, I am sorry if it’s not but does anyone have any tips or know where I can ask this sort of question?

    Thank you!

  22. IH8DIVS

    Whats teh purpose of this?

  23. ethan

    cool! does it work with master/content .net pages?

  24. ethan

    cool! does it work with master/content .net pages?

  25. You should trigger the transition when the mousedown event is fired from the label element. It will act more seamlessly. Browsers don’t wait our mouseup when focusing to the form, why should they when we “click” the label?

    Also a little bug:
    After the label has been moved to the left, why the heck when I click it again the transition is fired again?!

    Details make the difference ;)

  26. Miria

    I really like this, but I want to ask, how do you insert this onto your page to make it work?
    What do you save the js code as and what do you use to insert it into your HTML?

    please let me know!

  27. great this is really informative,you did great job.

  28. Pride Grimm

    Hey, this is great, I have been working on Tim’s version with Jquery, and have had some problems with multiple forms on one page. I can’t figure out why? Any ideas?

  29. this is great, thanks david

  30. Laurens

    This script is really awesome, but I do have one question:

    How can you use this on a TEXTAREA instead on an input?

  31. sica


    one question, where do i paste The MooTools JavaScript? and how does it work on a textarea instead of on a input?


    • Laurens

      You need to paste the MooTools Javascript between the HEAD tags.
      When you want it in a textarea, you need a second copy of the script, and change all the ‘input’ words to ‘textarea’. then in the second copy you also change the label from .slider to something else like .slider_textarea
      then you can give the textarea that class (in this case slider_textarea) and it will work.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...