如何聚焦文本框？

Question

当文本框聚焦时，如何才能产生明亮的效果？

Twitter的登录页面已经实现了亮白文本框。

我想知道如何实施它。

有什么想法吗？纯CSS？或者一些javascript来处理焦点事件和addClass removeClass吗？

我更喜欢使用jQuery方式实现javascript内容而不是使用纯javascript实现：）

Answer 1

Twitter通过一个简单的CSS3 box-shadow实现了这个：

input:focus {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(255, 255, 255, 0.9)
}

在聚焦元素时，不需要Javascript来处理样式更改。

Answer 2

您还可以在文本框的onFocus事件上编写函数。在该函数内部只需更改文本字段的css类。有点像这样   <input type=Text onfocus=change()/><script>function change(){// Code to change the class}</script> 希望这会有所帮助。

Answer 3

由于你的问题是用jQuery标记的，并且考虑过关注焦点事件，所以如何：

$("#yourTb").focus(function(){
    $(this).css("background-color", "yellow");
});

请不要忘记：

$("#yourTb").blur(function () {
    $(this).css("background-color", "white");
});