如何在文本框聚焦时变亮文本框？

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

我想知道如何实现它。

任何想法？纯粹的CSS？或一些JavaScript来处理焦点事件和addClass removeClass与它？

我喜欢的JavaScript实现的东西，而不是纯JavaScript :)贯彻jQuery的方式

2011-12-15 InspiredJW

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需要处理样式更改。

来源

2011-12-15 05:35:24 Interrobang

由于您的问题被标记与jQuery，并认为捕捉焦点事件，如何：

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

刚不要忘了：

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

来源

2011-12-15 05:35:20

这可以在没有任何Javascript的CSS中完成，更不用说jQuery了。 – Interrobang 2011-12-15 05:40:58

@Interrobang - 是的，它*可以完成，但问题被标记为jQuery，所以这不是一个不恰当的答案。 – 2011-12-15 05:41:48

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

来源

2011-12-15 06:05:40

如何在文本框聚焦时变亮文本框？

回答

相关问题