Показать изображение поиска над текстовым полем

Question

Возможно, вы уже видели причудливые поля поиска (например, в jQuery API ), где над текстовым полем отображается значок поиска, реагирующий на нажатия клавиш. Как я могу семантически добиться этого эффекта?

Я видел в некоторых пользовательских текстовых полях поиска Google, что он использует фоновое изображение в текстовом поле, а затем получает фокус и удаляет изображение. Кроме того, поле поиска здесь в StackOverflow также использует фоновое изображение небольшого значка поиска. Я знаю, как это сделать, это легко, но на самом деле это не тот эффект, которого я хочу. Я хотел бы иметь значок, который можно активировать при наведении курсора и который при нажатии отправляет форму.

Answer 1

Эта ссылка может вам помочь. Он имеет полный код http://www.cssportal.com/form-elements/text-box.htm

DEMO

HTML

<form id="search">
    <input type="text" class="text"/>
    <input type="button" class="possition"/>    
</form>

CSS

body{
    position:relative;
}
.possition
{
    position:relative;
    background:url('http://s9.postimg.org/6upsdsf97/Red_Button1.gif') no-repeat center center;
    width:20px;
    height:20px;
    border:none;
    margin-left:-25px;
    top:3px;
    z-index:999;
}
.text
{
    padding-right:22px;
}

Answer 2

Используйте некоторый HTML-код, похожий на этот (где ... означает вставить соответствующие атрибуты, необходимые для вашей формы):

<form id="search" ...>
    <input type="text" ...>
    <button></button>
</form>

Затем с помощью CSS установите position: relative для элемента form и position: absolute; right: 0 для кнопки. Установите фоновое изображение для кнопки и используйте text-indent: -9999em, чтобы скрыть текст кнопки вне экрана.

Если вы хотите более близко эмулировать решение jQuery, я предлагаю установить Firebug для Firefox и самостоятельно проверить HTML и CSS элемента.

Answer 3

Еще один способ сделать это - поместить относительно расположенную кнопку отправки в верхней части поискового ввода (с отступом в поисковом вводе, чтобы текст не работал под поисковым изображением. Затем дайте вашей кнопке состояние наведения, и вы все хорошо идти.

Answer 4

Вы можете сделать скин кнопки отправки формы и расположить ее с помощью css. Это немного сложно, заставить его работать во всех браузерах, но это возможно ..

Answer 5

Абсолютно разместите тег ссылки над правой стороной текстового поля и нарисуйте его на прозрачном фоне PNG. Прикрепите код к событию нажатия ссылки, чтобы найти и отправить форму. Тривиально, если вы используете стороннюю библиотеку Javascript, такую ​​как jQuery.