如何在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的（更新：對事件的內容清除輸入的拆除錯誤）

$('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; 
    }