ASP.net: Кто-нибудь знает, как реализовать эффект поиска в окне поиска YouTube?

Question

Когда текстовое поле поиска на YouTube сфокусировано на нем, оно как бы подсвечивается синим цветом вокруг текстового поля. Я хотел бы реализовать такой эффект в моем веб-приложении. Кто-нибудь знает, как это делается или что-то подобное?

Jack

Answer 1

Это просто стиль 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 2

Вы будете использовать Javascript для изменения поведения текстового поля на основе событий клиента (получение / потеря фокуса). Вы могли бы увидеть эту статью , чтобы начать освещать выделение. Настройка свойств границы будет выполнена аналогичным образом.

Answer 3

Вы можете использовать селектор: active psuedo в CSS, но это не работает с IE6 или IE7.

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

Поскольку это работает не во всех браузерах, они используют javascript в событиях onfocus и 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"); });
});