如何在像Twitter这样的textarea上添加发光边框？

Question

在推特中

这是正常的

这是悬停的光芒

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

Answer 1

这只是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

Answer 2

您是否尝试过.focus事件？ http://api.jquery.com/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;

在其他导航器中将会有更多属性要设置，因为第一个属性仅适用于firefox，而下一个属于基于webkit的浏览器（如chrome）。 并且.unbind（'焦点模糊'）因为twitter使用它们来确保所有导航器正确地看到页面。

这样的代码：

$(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');
    });
});

我希望它可以帮到你！ ^^

Answer 3

使用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可能会有所不同。