如何在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; 
    }