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（更新：删除了焦点输出时清除输入的错误）

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