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

Question

在twitter中这是正常的

这是悬停的光芒

有没有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');
    });
});

我希望它能帮助你！^^