У меня есть поле поиска. Как я могу поместить другой значок поиска в текстовое поле поиска?
Как и в этом изображении:
Мне нужна эта кнопка увеличения в моем текстовом поле (которое будет доступно клику)
Вот мое поле поиска: 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;
}
Здесь скрипка
<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 */
}
Конечный результат
И если вы хотите найти идентификатор из поиска, представленного ниже, это решение jQuery
$(function() {
$('.search_container a').hover(function() {
var id = $('.search_container_textfield').val();
$(this).attr('href', 'search_people.php?id='+id);
});
});
Вы можете обернуть <span>
вокруг ввода, а затем использовать span:after
как контент будет установлен, установите его абсолютным и выровняйте его так, как вы хотите.
Скрипт здесь Все, что вам нужно сделать, это изменить "Поиск" значка.
Вот еще один мой метод, который поддерживает шрифты fontawesome-.
У этой ссылки есть значок (который также доступен для клика)