Are there any built-in jQuery functions to highlight the borders of a form field?

Without using any plugins, are there any built in function in jQuery or jQuery UI to achive the for开发者_Python百科m field border highlighting effect that you see on sites like http://www.youtube.com ?

In YT when you click inside the search field the borders highlights blue.

I tried to achieve this using css and jquery addclass() function to give the input field that class when clicked in. BUT it's just not the same, the effect in youtube looks a lot better than what can be done via css.

EDIT

Oops I forgot, I meant the border should be added only when the user clicks inside the field. And I was wondering if there is a non-css based method.

By looking at the youtube source you can see that they're using css, why complicate things with JS? :focus is supported in all major browswers. Here's the source pulled from the youtube site (using firebug).

.search-form .search-term {
border:1px solid #666666;
height:1.38462em;
padding:4px 2px 1px;
width:22em;
}
.search-form .search-term:focus {
border:2px solid #BBDAFD;
margin-bottom:0;
margin-top:0;
padding-left:1px;
padding-right:1px;
}

Double checked w/FF 3.x on linux and everything worked great.

$(function(){
    $('#input id').focus(function(){
       $(this).css({'border': '1px solid #ff0000'}); // to red
    });
});

Why would you want a non-CSS method? Unless you are trying to account for browser deficiencies (which might very well apply here) with the CSS, you should always prefer a CSS solution to a JavaScript one.

However, here is the jQuery solution (pretty simple), but I would go with the CSS solution unless it proves unsatisfactory. This simply changes the style of the input's border when you focus on it. Keep in mind you will still have to remove the effect when it's blurred, etc.

$('input[type=text], input[type=password], textarea').focus(function(){
    $(this).css('border', '1px solid #000'); // you could (should) also use .addClass here to apply a class you've already defined in your CSS
});

You have to use some style formatting in order to achieve the effect. However, I tried to use minimal CSS in my code because you requested no CSS. This jQuery code will apply the effect to all input elements on the page.

$(function(){
  $('input')
    .focus(function() {
      $(this).css('border','2px solid #bbdafd');
    })
    .blur(function() {
      $(this).css('border,'1px solid #666666');
    });
});

Please note: the border styles (colors and width) were taken from Youtube, so it should very similar!