如何聚焦文本框？

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来处理样式更改.