css - 如何在文本框聚焦时使其变亮？

Question

如何在文本框聚焦时做出明亮的效果？

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

我想知道如何实现它。

有什么想法吗？纯CSS？或者一些 javascript 来处理焦点事件并用它来添加类和删除类？

我更喜欢用 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 来处理样式更改。