ASP.net：有誰知道如何實現YouTube的搜索框效果？

Question

當youtube上的搜索文本框對焦時，它會在文本框周圍以藍色突出顯示。我想在我的網絡應用上實現這種效果。有誰知道這是如何做的或類似的？

傑克

Answer 1

你會使用JavaScript來改變基於客戶端的事件（獲得/失去焦點）文本框的行爲。您可能會看到開始的this article，其中包含突出顯示。調整邊界屬性將以類似的方式完成。

Answer 2

它只是一個CSS樣式

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

的HTML使用JavaScript來添加和刪除類

<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

您可以使用：在CSS活躍僞選擇，但不工作與IE6或IE7。

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

由於不會與所有的瀏覽器，它們與在的onfocus JavaScript和的onblur事件去刪除一個類，設置邊框的顏色。你可以這樣做與jQuery 1.3是這樣的：

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