ASP.net: Est-ce que quelqu'un sait comment mettre en œuvre la boîte de recherche de youtube comme effet?

Question

Lorsque la zone de texte de recherche sur youtube est mise en évidence, elle est en quelque sorte surlignée en bleu autour de la zone de texte. J'aimerai mettre en place ce genre d'effet sur mon application web. Est-ce que quelqu'un sait comment cela est fait ou quelque chose de similaire?

Jack

Answer 1

Vous allez utiliser JavaScript pour changer le comportement textbox sur la base des événements clients (focus gagnent/perdre). Vous pouvez commencer par this article qui couvre la surbrillance. Ajuster les propriétés de bordure serait fait de la même manière.

Answer 2

Son juste un Css style

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

le Html utilise Javascript pour ajouter et supprimer la classe

<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

Vous pouvez utiliser le sélecteur: psuedo actif en CSS, mais cela ne fonctionne pas avec IE6 ou IE7.

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

Depuis cela ne fonctionne pas avec tous les navigateurs, ils vont avec javascript dans le onfocus et onblur pour supprimer une classe qui définit la couleur de la bordure. Vous pouvez le faire avec jQuery 1.3 comme ceci:

.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"); }); 
});