Значок поиска в строке поиска

У меня есть текстовое поле поиска. Как я могу поместить другой значок поиска в текстовое поле поиска?Значок поиска в строке поиска

Как один в этом изображении:

enter image description here

Мне нужна этот увеличительный кнопка в моем текстовом поле (который будет щелкать-состояние)

Вот мое Поле поиска: http://jsfiddle.net/ULtH4/

Вот мой код:

HTML:

<input type="text" name="search_people" placeholder="Search for people..." class="search_container_textfield" size="30" value="" id="inputString" />

CSS:

.search_container { 
    background-color: #FFFFFF; 
    width: 500px; 
    border-radius:5px 5px 5px 5px; 
    border:solid 1px #DFDFDF; 
    padding:2px; 
} 

    .search_container_textfield { 
     background-color: #FFFFFF; 
     border: 1px solid #CCCCCC; 
     border-collapse: collapse; 
     border-radius: 5px 5px 5px 5px; 
     float: left; 
     font-size: 13px; 
     height: 23px; 
     padding: 6px 4px; 
     position: relative; 
     width: 496px;s 
    } 

    .search_container_text { 
    color:#006666; font-size:13px; font-weight:normal;vertical-align:top !important; 
    }

источник

2013-09-19 Anonymous

проверьте код в js скрипке и замените изображение на свой http://jsfiddle.net/ULtH4/6/ –

Его на неправильной стороне. –

http://stackoverflow.com/questions/14017464/adding-search-icon-to-input-box смотрите здесь – Elior

Вот Fiddle

<div class="search_container"> 
    <input type="text" name="search_people" placeholder="Search for people..." class="search_container_textfield" size="30" value="" id="inputString" /> 
    <a href="search_people.php?id=123555"></a> 
</div> 


.search_container_textfield { 
    border: 1px solid #ccc; 
    border-radius: 5px 5px 5px 5px; 
    float: left; 
    font-size: 13px; 
    height: 23px; 
    padding: 6px 4px; 
    position: relative; 
    width: 496px; 
} 
.search_container_textfield:focus { 
    outline: none; 
    box-shadow: 0 0 2px 1px #00aeff; 
} 
.search_container a { 
    background: url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat; 
    background-size: 30px 30px; /* background-size added because original icon is 128x128px */ 
    display: block; 
    position: relative; 
    width: 37px; 
    height: 35px; 
    float: right; 
    margin: -37px -6px 0 0; 
    padding-left: 3px; 
    border: 1px solid #ccc; 
    border-radius: 0 5px 5px 0; 
} 
.search_container a:hover { 
    background: #e8e8e8 url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat; 
    background-size: 30px 30px; /* background-size added because original icon is 128x128px */  
}

Конечный результат

enter image description here

И если вы хотите найти идентификаторы из поиска, поданном ниже решение JQuery

$(function() { 
    $('.search_container a').hover(function() { 
     var id = $('.search_container_textfield').val(); 
     $(this).attr('href', 'search_people.php?id='+id); 
    }); 
});

источник

2013-09-19 09:45:52 mdesdev

Могу ли я передать строку запроса? search_people.php? id = 123555 –

Я не понимаю, пожалуйста, объясните немного лучше. Для функции поиска нужен полный скрипт. – mdesdev

Когда я нажимаю этот значок .. Он должен привести меня к этой ссылке: search_people.php? Id = 123555 –

Вы можете обернуть <span> вокруг входа, а затем использовать span:after к содержанию к нему, расположите его абсолютное и выровнять его, как вы хотите.

Fiddle here Все, что вам нужно сделать, это изменить «Поиск» значка.

Вот еще один метод, который я сделал, который поддерживает шрифты fontavesome-.

This link here has an icon (Which is clickable too)

источник

2013-09-19 09:37:11 Albzi

Как я могу разместить изображение там? –

Обновлено сообщение, так что теперь оно имеет значки – Albzi

Это не clickable –

Значок поиска в строке поиска

ответ

Смежные вопросы