How can I add a glowing border on a textarea like Twitter?

Question

in twitter this is the normal

and this is hover glow

is there a jquery plugin or code or css effect can do that

Answer 1

It's just CSS:

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

Doesn't work in IE yet though, and for FireFox you have to use the vendor prefix: -moz-border-radius

Answer 2

Have you tried the .focus event? http://api.jquery.com/focus/ You can do something like:

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

Usually, it's better to use classes to do this (methods .addClass() and .removeClass() ), but the example is only to show the idea. :)

I don't know if there is an way doing it by css, but by jquery is difficult to appear different behaviours from one navigator to another.

I have done some tests on twitter site, so I'he found those properties used in chrome and firefox. If you don't want the glow set them like this:

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

In other navigators there will be more properties to set, because the first is only for firefox and the next are for webkit based browsers like chrome. And .unbind('focus blur') because twitter use them to make sure all the navigators see the pages correctly.

A code like this:

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

I hope it helps you! ^^