트위터에서 입력 필드를 양식화하는 방법은 무엇입니까?

Question

승인을 위해 트위터에 입력 필드를 양식화하고 싶습니다. 내가 초점 속성 hint에 들어있는 텍스트의 투명도를 변경할 필요가

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

: 나는 다음과 같은 HTML 태그가 있습니다. 내가 어떻게 해?

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; 
    }