Статьи

jQuery Добавить текст по умолчанию в поле ввода поиска

Используйте jQuery, чтобы добавить текст по умолчанию в поле поиска. Простой, но эффективный!

  1. Текст исчезает при нажатии на поле поиска
  2. Текст отображается по умолчанию, когда поле пусто
  3. Окно отображается затененным и подсвечивается белым при наведении на него курсора.

jquery-default-search-box-text

Посмотреть демо

Следующее идет в JavaScript:

$('#search').blur(function(){ if (this.value == '') { this.value = 'Search BLOGOOLA'; } }) 

Следующее входит в HTML:

Следующее входит в CSS:

 #searchform { opacity:0.8 } #searchform:hover { opacity:1.0 } #searchform fieldset { border:0px; padding:0px; margin:0px; } #searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; } #searchform button{ float:right; width:30px; height:22px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); } #searchform button:hover { cursor:pointer; background-color:#E2E2E2; } 

Это изображение для кнопки формы:
search-icon