Как сделать значок поиска в css

Как создать поле поиска

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

В этой статье мы пошагово покажем, как можно создать поле поиска с помощью CSS и HTML.

  1. Создайте HTML
  • Создайте тег <form>, который используется для добавления HTML форм к веб-странице для пользовательского ввода.
  • Добавьте тег <input> внутри элемента <form>.
  • Добавьте также placeholder с выражением "Search here!" и класс "Search".
  • Добавьте другой input c классом "submit" и значение "search". ска, используя только CSS и HTML.

Теперь у нас есть поле поиска, но необходимо добавить стиль.

  1. Добавьте CSS

Есть три элемента, к которым необходимо применить стиль: "form", "search" и"submit".

  • Добавьте фоновый цвет текстовой части (body).
  • Начните оформление классов "form", "search"и "submit".
  • Установите width, margin, padding, и font-size.

После того, как все свойства добавлены, запустите код и увидите результат!

Как сделать поиск по сайту на HTML

Как сделать поиск по сайту на HTML

На этом уроке мы научимся встраивать строку поиска в адаптивное меню навигации, используя при этом только HTML/CSS код.

Демонстрация примера.

HTML разметка

Внутри меню навигации <nav> у нас будет три пункта меню в виде ссылок и встроен блок с классом search-box, внутри которого форма для поиска с полем поиска и кнопкой.

Вся эта конструкция до стилизации выглядит таким вот образом.

Как сделать поиск по сайту на HTML.

CSS код

Зададим светло-зелёный цвет фона для панели навигации.

nav <
background-color: #dcedc8;
>

Поместим все ссылки в строку с помощью обтекания слева, представим ссылки, как изначально строчные элементы – блочными.

nav a <
float: left;
display: block;
>

Меняем цвет фона под ссылками при наведении.

nav a:hover <
background-color: #8bc34a;
>

Стилизуем активный элемент для выделения пункта меню текущей страницы.

nav a.active <
background-color: #8bc34a;
color: #fff;
>

Располагаем контейнер для поиска на правой части панели навигации.

nav .search-box <
float: right;
>

Стилизуем поле для поиска внутри панели навигации.

nav input[type=text] <
padding: 5px;
margin-top: 7px;
border: none;
>

Стилизуем кнопку Отправить внутри контейнера с поиском, располагая её правее по отношению к строке поиска (float:right).

nav .search-box button <
float: right;
padding: 5px;
margin-top: 7px;
margin-right: 15px;
background: #8bc34a;
border: none;
cursor: pointer;
>

Меняем цвет кнопки при наведении.

nav .search-box button:hover <
background: #bdbdbd;
>

До ширины экрана 625 пикселей панель навигации выглядит хорошо.

Как сделать поиск по сайту на HTML.

После 625 пикселей конструкция ломается, необходимо делать медиа-запрос для маленьких устройств.

Как сделать поиск по сайту на HTML.

Медиа-запросы

Первым делом отменим обтекание везде, где оно было (float:none), это позволит всем элементам занять вертикальное положение, на ширине экрана меньше, чем 625 пикселей.

@media screen and (max-width: 625px) <
nav .search-box <
float: none;
>
nav a, nav input[type=text], nav .search-box button <
float: none;
display: block;
text-align: left; /* ссылки слева */
width: 100%; /* на всю ширину экрана */
>
nav input[type=text] <
border: 1px solid #689f38; /* рамка для строки поиска */
>
>

Как сделать поиск по сайту на HTML.

Добавить иконку на кнопку Отправить

1) Добавить ссылку между тегами head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2) Вставить иконку между тегами button:

Как сделать поиск по сайту на HTML.

Мы сделали лишь внешнюю сторону формы поиска по сайту, поиск пока не рабочий, то есть без программной части.

Посмотреть код целиком можно на Codepen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

Спасибо тебе, добрый человек! Ради отзыва решил даже зарегистрироваться на сайте. Это единственный поиск, который корректно подошел к моему сайту. За что огромное спасибо!

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Как сделать — Панель поиска

Узнайте, как добавить поле поиска в адаптивное меню навигации на сайте.

Панель поиска

Создать панель поиска

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Добавьте черный цвет фона к верхней панели навигации */
.topnav <
overflow: hidden;
background-color: #e9e9e9;
>

/* Стиль ссылок внутри панели навигации */
.topnav a <
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Изменить цвет ссылок при наведении */
.topnav a:hover <
background-color: #ddd;
color: black;
>

/* Стиль элемента "active" для выделения текущей страницы */
.topnav a.active <
background-color: #2196F3;
color: white;
>

/* Стиль окна поиска внутри панели навигации */
.topnav input[type=text] <
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
>

/* Если ширина экрана меньше 600 пикселей, расположите ссылки и поле поиска вертикально, а не горизонтально */
@media screen and (max-width: 600px) <
.topnav a, .topnav input[type=text] <
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
>
.topnav input[type=text] <
border: 1px solid #ccc;
>
>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *