Question

On the twitter login page, the label for input fields arrive inside input fields that uses a common trick with javascript/jquery. However, I went through a twitter source to figure out how they are doing that. I found onChange: it adds a class ‘hasome’ to a parent div and has a default text as a span, which never gets a property like display:none;.

I have tried to go through their HTML/CSS/JS but could not find their methods. Can someone please tell how twitter is doing that?

Edit
Twitter code:

<div class="placeholding-input username hasome">
    <input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
    <span class="placeholder">Username or email</span>
</div>

Added twitter HTML in question. When we add some code, it only add one class ‘hasome’ in parent div. in firebug, I could not see any property assigned to class ‘hassome’. My question is where is there code which is doing that or CSS if it is achieved by CSS.

Answer 1

While the hasome class is applied to the parent div, it’s used in a selector that’s setting CSS values on the child span. So in Firebug (or Chrome or IE’s developer tools), you’ll need to keep an eye on that child span, not the div, to see what’s going on.

You should end up seeing the following rules applied, from the CSS file t1_core_logged_out.bundle.css:

.has-content .placeholder, .hasome .placeholder
{
    font-size:0!important;
    z-index:-1;
    -moz-opacity:0;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

The part of the rule that ends up taking effect is the “.hasome .placeholder” part: when an element with style .placeholder has an ancestor with class .hasome, then various techniques are used to hide that child element. It’s basically using a class on a parent to control styles of a child or descendant, which is a fairly common CSS technique.