Create a search icon inside input box with HTML and CSS
Displaying a search icon inside an input box is a nice way to indicate to the user that it is indeed a search input.
Google search input 
Duckduckgo search input 
Twitter search input 
CodePen search input 
Gmail search input 
Vimeo search input
Markup
The HTML for our search box with an icon will consist of a form , input , and button elements.
The form will act as a wrapper, as well as will react to the submit event.
The input element should have a type attribute equal to the search value. It will ensure a better usability on mobile devices. The keyboard with a layout suited for search will be shown.
�� NOTE: To improve UX you can also specify an input placeholder e.g. «Search…». This will give a user an additional hint that this is indeed a search input.
Finally, the button type attribute should have a submit value. The proper button type will ensure the form can be submitted via button click without additional events for this button. The button will also act as an icon.
Styling
First, we’ll need to set the form element display property value to flex . This will allow us to properly align input and button elements.
We’ll also set a border property to wrap elements closer together.
Next, we need to set styles for our search input box. It should span the full width of the container element, as well as have some visually appealing properties.
Finally, let’s add some styling to the submit button. We will hide the text of the button with text-indent and overflow properties, and display in its place a magnifying glass icon.
To display the icon we can use encoded svg as a background image.
The last touch is to set the :focus state on input and button elements:
�� NOTE: Since it’s a search input, you might want to display a clear button as well.
No button example
If you’re willing to show an icon inside an input without it being a button, just remove the submit button from the form.
You can leave existing form and input styles but in this case, set the icon as a background for the input.
How can I add a Google search box to my website?
I am trying to add a Google search box to my own website. I would like it to search Google itself, not my site. There was some code I had that use to work, but no longer does:
When I try making a search, it just directs to the Google homepage. Well, actually it directs here: https://www.google.com/webhp
Does anyone have a different solution? What am I doing wrong?
5 Answers 5
Sorry for replying on an older question, but I would like to clarify the last question.
You use a «get» method for your form. When the name of your input-field is «g», it will make a URL like this:
But when you search with google, you notice the following URL:
Google uses the «q» Querystring variable as it’s search-query. Therefor, renaming your field from «g» to «q» solved the problem.
This is one of the way to add google site search to websites:
Figured it out, folks! for the NAME of the text box, you have to use «q». I had «g» just for my own personal preferences. But apparently it has to be «q».
Anyone know why?
(The reason your code isn’t working is because the GET request name is now "q" instead of "g".
I recommend using one of the two methods below:
Method 1: Simply send a GET request directly to Google (Best and most simple option)
Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно увидеть здесь.
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3
- IE9 и ниже — не увидим текст по умолчанию (атрибут placeholder ).
- IE8 и ниже — не увидим закругленных углов и внутренних теней.
- IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing .
- IE6 — а его вообще в расчет не берем =)
В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поиска
Выглядит он вот так:
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:
Как добавить поиск в html
В этом разделе перечислены все уроки без разделения по рубрикам.
Выбирайте тот урок, который интересует Вас больше всего на данный момент. К каждому уроку Вы можете оставить свой комментарий, а также проголосовать.
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
Почему WordPress лучше чем Joomla ?
Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.
Про шаблоны WordPress
После установки и настройки движка нам нужно поработать с дизайном нашего сайта. Это довольно долгая тема, но мы постараемся рассказать всё кратко и ясно.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Самые первые настройки после установки движка WordPress
Сегодня мы вам расскажем какие первые настройки нужно сделать после установки движка WordPress. Этот урок будет очень полезен для новичков.