Jquery 如何在Twitter这样的文本区域添加发光边框？

在推特上 这是正常的

这是悬停发光

是否有jquery插件或代码或css效果可以做到这一点

这只是css：

textarea:focus {
 border-radius: 0 0 8px rgba(82, 168, 236, 0.5);
 rgba(82, 168, 236, 0.75);
}

---

但在IE中还不能工作，对于FireFox，您必须使用供应商前缀：

-moz border radius

使用Firebug。。这似乎适用于处于焦点的长方体：

.tweet-box textarea:focus .tweet-box input[type=text] {
    -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
    border-color: rgba(82, 168, 236, 0.75) !important;
}

---

我使用Firefox，CSS在其他浏览器中可能会有所不同

您是否尝试过.focus事件？ 您可以执行以下操作：

$(document).ready(function()
{
    $('twiter_textareas_selector').focus(function()
    {
         $(this).css('border':'blue 3px solid');
    }).blur(function()
    {
         $(this).css('border':'gray 1px solid');
    });
});

通常，最好使用类（方法.addClass（）和.removeClass（））来实现这一点，但本示例只是为了说明这一点。：）

我不知道是否有一种方法可以通过css实现，但是通过jquery很难在不同的导航器之间显示不同的行为

我在twitter网站上做了一些测试，所以我发现了chrome和firefox中使用的属性。如果不希望辉光将其设置为：

-moz-box-shadow: 0 0 0 none;
-webkit-transition: border 0 linear;
-webkit-box-shadow: 0 linear;

$(document).ready(function()
{
    $('twiter_textareas_selector').unbind('blur focus'); //try to stop the twitter scripts
    $('twiter_textareas_selector').focus(function()
    {
         $(this).css('moz-box-shadow': '0 0 0 none', '-webkit-transition': 'border 0 linear', '-webkit-box-shadow': '0 linear');
    });
});

在其他导航器中，将有更多属性需要设置，因为第一个属性仅适用于firefox，第二个属性适用于基于webkit的浏览器，如chrome。 和.unbind（'focus blur'），因为twitter使用它们来确保所有导航器都能正确地看到页面

这样的代码：

-moz-box-shadow: 0 0 0 none;
-webkit-transition: border 0 linear;
-webkit-box-shadow: 0 linear;

$(document).ready(function()
{
    $('twiter_textareas_selector').unbind('blur focus'); //try to stop the twitter scripts
    $('twiter_textareas_selector').focus(function()
    {
         $(this).css('moz-box-shadow': '0 0 0 none', '-webkit-transition': 'border 0 linear', '-webkit-box-shadow': '0 linear');
    });
});

---

我希望它能帮助你^^

我不想在文本区域上发光