ASP.net: Does anyone know how to implement youtube search box like effect?

Question

When the search text box on youtube have focus on it, it is sort of highlighted with blue color around the text box. I'll like to implement that kind of effect on my web app. does anyone know how that's done or something similar?

Jack

Answer 1

You'll use Javascript to change the textbox behavior based on the client events (gaining/losing focus). You might see this article to start which covers the highlighting. Adjusting border properties would be done in a similar fashion.

Answer 2

Its just a Css Style

#masthead .search-term-focus {
border:2px solid #BBDAFD !important;
margin:4px 4px 0 0;
}

the Html uses Javascript to add and remove the Class

<input id="footer-search-term" class="search-term" type="text" 
onblur="removeClass(this, 'search-term-focus')" 
onfocus="addClass(this, 'search-term-focus')" maxlength="128" value="" />

Answer 3

You could use the :active psuedo selector in CSS, but that doesn't work with IE6 or IE7.

input:active {
     border: 2px solid #BBDAFD;
}

Since that doesn't work with all browsers, they go with javascript in the onfocus and onblur events to remove a class that sets the border color. You can do this with jQuery 1.3 like this:

.input-focus {
     border: 2px solid #BBDAFD;
}

$(document).ready(function() {
    $("input:text").focus(function() { $(this).addClass("input-focus"); });
    $("input:text").blur(function() { $(this).removeClass("input-focus"); });
});