Добавление значка поиска в поле ввода

<div id="inputs">
<input type="text" value="">
<input type="text" value="">
</div>
<input type="button" id="add" value="Add input">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
 $('#inputs').append('<input type="text" value="">');
});
});
</script>

В приведенном выше коде я хочу добавить значок поиска для каждого нового ввода, сгенерированного с помощью кнопки (id = add, не показан для простоты). Это будет типичный ввод:

<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
    <span class="glass"></span>
    <span class="handle"></span>
</span>
</label>

С помощью CSS я могу поместить значки поиска в фиксированном виде.

Спасибо

Ответ 1

Вот код CSS, который я бы использовал:

<style>
#add{
padding:17px;padding-left:55px;width:300px;border:1px solid #f5f5f5;
font-size:13px;color:gray;
background-image:url('http://i47.tinypic.com/r02vbq.png');
background-repeat:no-repeat;
background-position:left center;outline:0;
}
</style>

Примечание. Я добавил много дополнительных кодов, чтобы окно поиска выглядело лучше, необходимый код, чтобы окно поиска выглядело как padding-left, background-image: url, background-repeat и background-position. Замените " http://i47.tinypic.com/r02vbq.png" с помощью любого значка поиска, который вы хотите.

Также важно знать, что теперь в HTML5 большинство браузеров отображают

<input type="search" results>

с помощью значка поиска. Поиск типа ввода делает его полем поиска с кнопкой "x", чтобы очистить, и добавление "результатов" также отображает окно поиска. Конечно, вы также можете добавить кнопку x с CSS и JavaScript в обычное окно поиска. Также важно отметить, что поиск входного типа позволяет очень мало стилизовать. Демо на Safari на Mac:

Скажите мне, поможет ли это вам, и обязательно отметьте в качестве ответа.:)

Ответ 2

Поместите изображение в диапазон, например, используя background-image, затем придайте ему относительное положение и переместите его влево, чтобы он перекрывал правый конец окна поиска, например:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}

Рабочий пример в JSBin

Примечание. Это не мой ответ, я нашел его здесь

Ответ 3

Здесь шаг за шагом на kirupa.com здесь: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm

С соответствующим битом CSS для вас здесь:

input[type=text] {
    width: 260px;
    padding: 5px;
    padding-right: 40px;
    outline: none;
    border: 2px solid #999999;
    border-radius: 5px;
    background-color: #FBFBFB;
    font-family: Cambria, Cochin, Georgia, serif;
    font-size: 16px;
    background-position: 270px -10px;
    background-image: url('http://www.kirupa.com/images/search.png');
    background-repeat: no-repeat;
}