Один из вариантов как сделать кнопку поиска на сайт в необычном исполнении.
HTML
CSS
body < background-color: #ff9800; color: #fff; margin: 0; >#content < position: absolute; height: 50px; width: 300px; margin-left: 170px; top: 50%; left: 50%; transform: translate(-50%, -50%); >#content.on < -webkit-animation-name: in-out; animation-name: in-out; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; >input < box-sizing: border-box; width: 50px; height: 50px; border: 4px solid #ffffff; border-radius: 50%; background: none; color: #fff; font-size: 16px; font-weight: 400; font-family: Roboto; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); >.search < background: none; position: absolute; top: 0px; left: 0; height: 50px; width: 50px; padding: 0; border-radius: 100%; outline: 0; border: 0; color: inherit; cursor: pointer; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); >.search:before < content: «»; position: absolute; width: 20px; height: 4px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: 26px; margin-left: 17px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; >.close < -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; >.close:before < content: «»; position: absolute; width: 27px; height: 4px; margin-top: -1px; margin-left: -13px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; >.close:after < content: «»; position: absolute; width: 27px; height: 4px; background-color: #fff; margin-top: -1px; margin-left: -13px; cursor: pointer; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); >.square
JS
const input = document.getElementById(«search-input»); const searchBtn = document.getElementById(«search-btn»); const expand = () => < searchBtn.classList.toggle(«close»); input.classList.toggle(«square»); >; searchBtn.addEventListener(«click», expand);
Источник: devtutor.ru
Создайте работающую панель поиска с помощью HTML и JavaScript
Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой статье мы создадим рабочую панель поиска с помощью HTML, CSS и JavaScript. Мы добавляем значок поиска в нашу рабочую панель поиска с помощью потрясающего значка шрифта. Итак, давайте начнем создавать рабочую панель поиска.
Область интернет-браузера, где вы можете искать в Интернете то, что ищете, называется панелью поиска. Например, на изображении изображена панель поиска в Firefox, которая не только обеспечивает поиск в Интернете, но также позволяет вам выбрать конкретную поисковую систему, которую вы хотите использовать.
Надеюсь, вам понравится наш блог, поэтому давайте начнем с базовой структуры HTML для рабочей панели поиска.
Html-код рабочей панели поиска: —
HTML означает язык гипертекстовой разметки. Это язык разметки. Его основная задача — дать структуру нашему проекту. Мы предоставим структуру нашего проекта, используя этот язык разметки. Итак, давайте посмотрим на наш HTML-код.
Начнем с HTML-файла. Сначала скопируйте приведенный ниже код и вставьте его в HTML-файл внутри IDE.
Hidden Search
Лучшая форма поиска для блога на CSS3
В этой статье рассматривается пример создания формы поиска для блога на WordPress, с использованием HTML5 и CSS3.
Форма будет одинаково отображаться во всех браузерах, и иметь валидный HTML5 и CSS3 код.
Созданная форма будет обладать такими качествами, как:
- закругленные уголки,
- изображение внутри input,
- размер input изменяется при щелчке на нем,
- кнопка для очистки формы.
Шаг 1. Настройки functions.php
Для начала, в папке с вашей темой найдите файл functions.php. Убедитесь, что функции get_search_form там нет. Это можно сделать через поиск. Теперь добавьте следующее:
function search_form ( $form ) <
$form = ‘
return $form ;
add_filter ( ‘get_search_form’ , ‘search_form’ ) ;