css - Twitterのように入力フィールドをスタイル化する方法は？

Question

承認のためにTwitterのように入力フィールドを定型化したい。私は次のHTMLマークアップを持っています：

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

hintフォーカスの属性に含まれるテキストの不透明度を変更する必要があります。どうすればいいですか？

Answer 1

わかりました、これがあなたが望むものです：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（更新：focusoutでの明確な入力のバグを削除）

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

Answer 2

これを試して

    input[hint="hint"]:focus{
        opacity: .4;
    }