Создание поля поиска в html/css
Базу для поля поиска можно создать на основе тега <form>, в который будут вложены два тега <input>. Первый тег отвечает за поле поиска, второй — за кнопку «Поиск».
В HTML5 для поиска существует специальное поле с типом «search». Оно отличается от текстового тем, что браузеры Chrome, Safari и IE10, добавляют крестик в правой части поля для быстрой очистки введенного текста. Атрибут placeholder позволяет выбрать текст для автозаполнения поля.
Второй <input> создает кнопку отправки данных и имеет тип «submit». Атрибут value определяет, что будет написано на кнопке.
<form> <input type="search" name="text" class="search" placeholder="Что вы хотите найти?"> <input type="submit" name="submit" class="submit" value="Найти"> </form>
Такое поле поиска выглядит очень скромно, но его можно изменять с помощью css.
Пример 1
В данном примере были изменены цвет поля ввода и кнопки. В помощью атрибута border-radius скруглены края. Текст на кнопке заменен иконкой с помощью атрибута background.
Пример 2
Добавляем анимацию с помощью transform.
html-код как в предыдущем примере.
В первую очередь назначаем для тега <form> позиционирование relative, а для input - позиционирование absolute. Привяжем поле ввода и кнопку к верхнему левому краю формы.
Используем псевдокласс :hover, чтобы при наведении мышки на форму кнопка смещалась на 200px вправо, а поле ввода растягивалось, заполняя пространство до кнопки.
С помощью функции свойства transform — translate() - можно переместить элемент с его начальной точки. Функция принимает два параметра — один для перемещения по оси X, второй — по оси Y.
Свойство transitions предоставляют способ контролировать скорость анимации.