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

【问题标题】：ASP.net: Does anyone know how to implement youtube search box like effect?ASP.net：有谁知道如何实现 youtube 搜索框效果？
【发布时间】：2010-10-06 01:40:09
【问题描述】：

当 youtube 上的搜索文本框聚焦于它时，它会在文本框周围以蓝色突出显示。我想在我的网络应用程序上实现这种效果。有谁知道这是怎么做的或类似的吗？

杰克

【问题讨论】：

标签： asp.net css

【解决方案1】：

您将使用 Javascript 根据客户端事件（获得/失去焦点）更改文本框行为。您可能会看到 this article 开始覆盖突出显示。调整边框属性将以类似的方式完成。

【讨论】：

【解决方案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="" />

【讨论】：

【解决方案3】：

您可以在 CSS 中使用 :active 伪选择器，但这不适用于 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"); });
});

【讨论】：