Используйте jQuery, чтобы добавить текст по умолчанию в поле поиска. Простой, но эффективный!
- Текст исчезает при нажатии на поле поиска
- Текст отображается по умолчанию, когда поле пусто
- Окно отображается затененным и подсвечивается белым при наведении на него курсора.
Следующее идет в 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; }
Это изображение для кнопки формы: