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添加和删除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

您可以在CSS中使用：active psuedo选择器，但这不适用于IE6或IE7。

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

由于这不适用于所有浏览器，因此它们在onfocus和onblur事件中使用javascript来删除设置边框颜色的类。您可以使用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"); });
});

ASP.net：有谁知道如何实现youtube搜索框效果？

3 个答案: