Question

I want to stylize input field as on twitter for authorization. I have the following HTML markup:

<input hint="hint" name="name" type="text">

I need to changed an opacity of the text that contains in the attribute hint on focus. How can I do it?

Answer 1

Ok, here is what you want: http://jsfiddle.net/surendraVsingh/NLrRC/16/

HTML

<div class="container">
 <input type="text" />
 <span>Username or email</span>
</div>​

CSS

.container{position:relative; display:inline-block; overflow:hidden;}
.container input{position:relative; z-index:98;}
.container span{position: absolute; z-index:99; color:#ccc; left:5px; top:3px; font-size:11px;}

Jquery(Updated: Removed bug of clear input on focusout)

$('input').keyup(function(){
    $(this).next().css('z-index', '0');
});
$('input').blur(function(){
  if($('input').val()=== ''){
    $('input').next().css('z-index', '99');
  }
});