Как создать аналогичный элемент "поиск" в файле этот сайт?
Если мы рассматриваем источник, у него есть одно текстовое поле, за которым следует тег <span>.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
Где можно получить аналогичное изображение "увеличительного стекла"?
Поместите изображение в диапазон, например, используя 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 */
}
Ваши глаза обманывают вас. Кнопка не находится в текстовом поле. Использование фонового изображения НЕ, так как оно не предоставляет кнопку нажатия кнопки.
Что вам нужно сделать, это добавить обертку div вокруг ввода: текст и ввод: отправить
Оболочка будет выглядеть как текстовое поле, но на самом деле будет содержать прозрачное текстовое поле и кнопку отправки. Вам нужно будет специально удалить стили для ввода: текст и ввод: представить элементы
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Input Example</title>
<style type="text/css">
/* <![CDATA[ */
.search
{
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"]
{
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"]
{
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
/* ]]> */
</style>
</head>
<body>
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
</body>
</html>
Очень важно, чтобы вы сохраняли кнопку отправки, в противном случае нажатие на ввод во время поиска не будет иметь реакции по умолчанию. Кроме того, размещение кнопки отправки после текстового поля позволяет людям фактически нажимать на кнопку.
EDIT: вы можете сделать свой собственный увеличительный образ, их довольно легко сделать в прозрачном png 20x20px.
Если вы просматриваете страницу в Google Chrome, щелкните правой кнопкой мыши по кнопке поиска и выберите "Осмотреть элемент", вы сможете увидеть CSS, используемый для достижения этого эффекта.
Если вы не знакомы с CSS, я настоятельно рекомендую 'CSS: окончательное руководство.
У такого сайта, как Iconspedia, есть количество бесплатных значков, которые похожи.
Где бы вы ни находили значок, будьте осторожны, чтобы убедиться, что у вас есть права использовать его в своем приложении. Многие графики защищены, а некоторые имеют ограничительные лицензии.
Я хотел бы подключить новый плагин jQuery, который я написал, потому что я чувствую, что он отвечает на запрос OP. Он называется jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
Это позволяет вам легко добавить значок в левую часть текстового поля. Для использования значка в виде кнопки вы можете легко привязываться к событию "iconfield.click", которое запускается, когда пользователь щелкает значок. Он также позаботится об изменении курсора, когда мышь висит над значком.
Например:
$('#search-field').iconfield( {
'image-url': 'imgs/search.png', // url of icon
'icon-cursor': 'pointer' // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
$('#search-form').submit()
}
Я хотел бы получить некоторые отзывы о моей работе.
Если вы используете фоновое изображение в поле, тогда нет способа привязки к нему, чтобы получить действие click. Таким образом, решение состоит в том, чтобы иметь отдельное поле поиска и изображение, поэтому вы можете связать событие click в jQuery с изображением. Скрипт здесь:
http://jsfiddle.net/Lzm1k4r8/23/
Вы можете отрегулировать положение left: в левой или правой части окна поиска.
Чтобы помочь с отзывами пользователей, почему бы не добавить значок указателя на вашу мышь, когда вы нависаете над увеличительным стеклом? Просто примените это к своему CSS:
.search: hover { курсор: указатель; }