Как создать элемент «поиск», аналогичный элементу в этот сайт?
Если мы посмотрим источник, у него есть одно текстовое поле, за которым следует тег <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 */
}
background-image: url(filename.png).
- person casablanca; 02.11.2010
span дальше влево, мой пример был только для width: 16px. В любом случае убедитесь, что ваше изображение не слишком большое.
- person casablanca; 02.11.2010
Ваши глаза обманывают вас. Кнопка не находится в текстовом поле. Использование фонового изображения НЕ – не лучший вариант, так как оно не предоставляет кнопку отправки, на которую можно нажать.
Что вам нужно сделать, так это добавить div-оболочку вокруг input:text и input:submit
Оболочка будет выглядеть как текстовое поле, но на самом деле будет содержать прозрачное текстовое поле и кнопку отправки. Вам нужно специально удалить стили для элементов input:text и input:submit.
<!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>
Очень важно, чтобы вы сохранили кнопку отправки, иначе нажатие Enter во время поиска не вызовет реакции по умолчанию. Кроме того, размещение кнопки отправки после текстового поля позволяет людям на самом деле нажать на кнопку.
РЕДАКТИРОВАТЬ: вы можете сделать свое собственное увеличивающее изображение, их довольно легко сделать в прозрачном формате png 20x20px.
Если вы просматриваете страницу в Google Chrome, щелкните правой кнопкой мыши кнопку поиска и выберите «Проверить элемент», вы сможете увидеть CSS, используемый для достижения этого эффекта.
Если вы не знакомы с CSS, я настоятельно рекомендую CSS: полное руководство.
На таком сайте, как Iconspedia, есть количество похожих бесплатных значков.
Где бы вы ни получили значок, убедитесь, что у вас есть права на его использование в вашем приложении. Многие графические изображения защищены, а некоторые имеют ограничительные лицензии.
Если вы используете фоновое изображение в поле, то нет возможности привязаться к нему, чтобы получить действие щелчка. Таким образом, решение состоит в том, чтобы иметь отдельное поле поиска и изображение, чтобы вы могли привязать событие клика в jQuery к изображению. Скрипка здесь:
http://jsfiddle.net/Lzm1k4r8/23/
Вы можете настроить положение left: слева или справа от окна поиска.
Чтобы помочь с отзывами пользователей, почему бы не добавить значок указателя мыши, когда вы наводите курсор на увеличительное стекло? Просто укажите это в своем CSS:
.search:hover {курсор:указатель; }
Я хотел бы подключить новый плагин 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()
}
Хотелось бы получить отзывы о своей работе.
