.
Чем отличается Mozilla Firefox , добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type="text" .
Чем отличается ? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.
Текст в поля формы можно добавлять двумя способами:серого цвета . С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.
Input::-webkit-input-placeholder {
color: #B6C0A5;
font-style: italic;
background: #E0EFCA;
}
input:-moz-placeholder {
color: #B6C0A5;
font-style: italic;
background: #E0EFCA;
}
input:-ms-input-placeholder {
color: #B6C0A5;
font-style: italic;
background: #E0EFCA;
}
2)
Input {
color: white;
}
Для отображения иконок не забудьте подключить .
2. Поле поиска с кнопкой-иконкой
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input {
width: 100%;
height: 42px;
padding-left: 10px;
border: 2px solid #7BA7AB;
border-radius: 5px;
outline: none;
background: #F9F0DA;
color: #9E9C9C;
}
button {
position: absolute;
top: 0;
right: 0px;
width: 42px;
height: 42px;
border: none;
background: #7BA7AB;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
3. Поле поиска с кнопкой внутри
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
border-radius: 3px;
}
input {
width: 100%;
height: 42px;
background: #F9F0DA;
padding-left: 15px;
}
button {
height: 26px;
width: 26px;
position: absolute;
top: 8px;
right: 8px;
background: #F15B42;
cursor: pointer;
}
button:before {
content: "\f105";
font-family: FontAwesome;
color: #F9F0DA;
font-size: 20px;
font-weight: bold;
}
4. Поле поиска в стиле «flat»
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
background: #A3D0C3;
}
input, button {
border: none;
outline: none;
background: transparent;
}
input {
width: 100%;
height: 42px;
padding-left: 15px;
}
button {
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
5. Поле поиска с толстой нижней границей
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
background: #F9F0DA;
border-bottom: 4px solid #be290e;
}
input, button {
border: none;
outline: none;
background: transparent;
}
input {
width: 100%;
height: 42px;
padding-left: 15px;
}
button {
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f178";
font-family: FontAwesome;
font-size: 20px;
color: #be290e;
}
6. Поле поиска с меняющимся цветом границы
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
outline: none;
background: transparent;
}
input {
width: 100%;
height: 42px;
padding-left: 15px;
border: 3px solid #F9F0DA;
}
button {
border: none;
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
input:focus {
border-color: #311c24;
}
7. Выезжающее поле поиска
Поле поиска появляется при нажатии на кнопку с иконкой.
* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
height: 42px;
}
input {
height: 42px;
width: 0;
padding: 0 42px 0 15px;
border: none;
border-bottom: 2px solid transparent;
outline: none;
background: transparent;
transition: .4s cubic-bezier(0, 0.8, 0, 1);
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
input:focus {
width: 300px;
z-index: 1;
border-bottom: 2px solid #F9F0DA;
}
button {
background: #683B4D;
border: none;
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
8. Увеличивающееся в ширину поле поиска
* {box-sizing: border-box;}
form {
width: auto;
float: right;
margin-right: 30px;
}
input {
width: 250px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid #324b4e;
background: #F9F0DA;
outline: none;
position: relative;
transition: .3s linear;
}
input:focus {
width: 300px;
}
button {
width: 42px;
height: 42px;
background: none;
border: none;
position: absolute;
top: -2px;
right: 0;
}
button:before{
content: "\f002";
font-family: FontAwesome;
color: #324b4e;
}
В данном уроке мы создадим раскрывающуюся форму поиска, которая отлично впишется в дизайн интерфейса для мобильных устройств. Для реализации элемента будет использоваться только CSS - никакого JavaScript и дополнительной разметки. Простой и эффективный способ для реализации компактной формы поиска.
Назначение
На мобильных устройствах идет учет каждого пикселя. Для минимизации требуемого для вывода формы пространства она будет изначально показываться в компактной форме и раскрываться по получению фокуса ввода (:focus
). Такой подход позволяет сохранить место для других элементов интерфейса и содержания.
Разметка HTML
Для формы используется HTML5. Код очень простой:
Сбрасываем вид для формы поиска по умолчанию в браузерах Webkit
По умолчанию в браузерах Webkit форма поиска будет иметь следующий вид:
Для того, чтобы форма поиска выглядела как обычное поле ввода текста нужно добавить следующие стили:
Input {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
Формируем нашу форму поиска
Поле ввода будет иметь обычную ширину 55px и раскрываться для 130px в состоянии :focus
. Свойство transition
используется для анимации, а box-shadow
используется для эффекта свечения.
Input {
background: #ededed url(img/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px; /* Ширина по умолчанию */
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input:focus {
width: 130px; /* Ширина при наличии фокуса ввода */
background-color: #fff;
border-color: #6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5); /* Эффект свечения */
}
Пример В
В примере B форма поиска существенно минимизирована - выводится только иконка без заполняющего текста. Обратите внимание, что изменились свойства padding
и width
для поля поиска, чтобы сформировать круглую кнопку. Для того, чтобы текст был невидим используется свойство color:transparent
.
#demo-b input {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input:hover {
background-color: #fff;
}
#demo-b input:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
Совместимость с браузерами
Описанный метод работает во всех основных браузерах: Chrome, Firefox, Safari, и IE8+. В IE7 и старых браузерах функционал не действует по причине отсутствия поддержки псевдо-класса:focus и типа поля поиска.
The combined address and search bar allows you to query search engines or input web addresses to find what you’re looking for on the web. Opera uses the Google search engine by default.
To search the web:
Click the Search or enter address
field. Type key words for what you want to find. For example, type movies . Click one of the predictive search suggestions that appear or press Enter
.
Predictive search suggestions appear as you type. If you want to view results from another search engine, such as Yahoo!, Amazon, or Bing, click the corresponding tab that appears in the lower-right part of the predictive search suggestion box.
If you already know the location of a page, type the web address directly into the combined address and search bar and press Enter to navigate to that page. For example, type www.opera.com and press Enter to navigate to the Opera Software homepage.
Default search engine
Opera’s default search engine is Google, but you may prefer to search using Ecosia, DuckDuckGo, Amazon, or Wikipedia. To change the default search engine:
Go to Settings
. Under Search engine
, select your preferred search engine from the dropdown menu.
Custom search engines
In addition to Opera’s default search engines, you can set up the combined address and search bar to return results from other search engines. To do so:
Right-click (Ctrl + click on Mac) on a site’s search bar and select Create Search Engine….
Assign the engine a name and keyword. Click OK
.
Create a custom search engine
To create a search in a custom search engine, type your engine’s assigned keyword first followed by a space and then enter your query.
You can edit keywords, and manage or remove search engines from the settings page. To do so:
Go to Settings
. Under Search engine
, click the Manage Search Engine
button.
Search with a custom search engine
To use a custom search engine in your search, type the keyword followed by a space before your query. For example, Bing has the keyword “b”. To search with Bing, type “b What is the capital of Idaho.” The results will open in a Bing search results page.
The space between the keyword and your search query is important for selecting a custom search engine.
Change search engines in the highlighted text context menu
With Opera’s search pop-up tool, you can highlight text on a web page and use the selected text as a search query. The search pop-up tool uses your default search engine. However, you may want results from another engine after highlighting text for a search query.
To search using the context menu, highlight some text on a web page and right-click (or CTRL + click) the selection.
In the pop-up window, hover your mouse over Search with
, then select the search engine you wish to use.
The results of the search will open in a new tab.
Change search engines in Instant Search
How to use search pop-up:
Highlight text on a web page. A pop-up will appear above the highlighted text, including the options Search
and Copy
(and Share
if on a Mac). If a currency, unit, or time zone is highlighted, the converted value will appear in the pop-up.
Select Search
to query your default search engine with the highlighted text. Select Copy
to copy the highlighted text to your clipboard. If there is a converted value in the pop-up, click the value to copy it to your clipboard.
To disable the search pop-up tool, including all of its functions:
Go to Settings
. Click Advanced
on the left sidebar, and click Features
. Under Search pop-up
, turn off Enable the search pop-up when selecting text
.
Для многих людей эффективность поиска информации в Интернете – это те самые ноги, которые волка кормят. Где найти актуальную и свежую информацию? Где купить дешевле, а продать подороже? Где найти максимально точные инструкции для выполнения тех или иных задач? Где посмотреть фильмы онлайн? Чтобы максимально корректно отвечать на эти и подобные вопросы пользователей поисковые системы из года в год совершенствуют и без того изощрённые механизмы представления сайтов в поисковых выдачах по конкретным пользовательским запросам. Цель поисковиков – отвести людей на как можно более качественный сайт для получения ответа на заданные вопросы.
Помимо поисковых механизмов, сами поисковики оснащены фильтрами поиска, чтобы любой пользователь мог сузить область поиска информации или конкретизировать свой запрос.
Рассмотрим ниже некоторые из поисковых расширений, которыми можно дополнить популярные браузеры, и, как следствие - увеличить эффективность поиска информации в Интернете.
Поисковые расширения для Google Chrome
Search the current site
Внутренним поисковиком обустроен не каждый сайт, и на таких ресурсах приходиться подолгу бегать из раздела в раздел в поисках конкретной информации. Внедрённое в браузер расширение для поиска внутри сайта – универсальный инструмент , который будет всегда под рукой, на какой бы сайт вы не попали. Всё, что необходимо сделать для поиска нужной информации внутри какого-то сайта, это ввести ключевой запрос в небольшое поисковое поле, появляющееся при нажатии кнопки расширения на панели браузера.
В новой вкладке браузера откроются результаты поиска поисковика, и в них будут отобраны страницы конкретного сайта, где встречается ключевое слово.
Search the current site внедряется с предустановленной поисковой системой Google, но в параметрах расширения можно установить другой поисковик – Яндекс, Yahoo или Bing. Для этого на кнопке расширения вызываем контекстное меню и выбираем команду «Параметры».
В новой вкладке браузера откроются параметры расширения, где можем выбрать другую поисковую систему. И уже она будет осуществлять поиск внутри сайта.
Альтернативный поиск Google
Поисковая система Яндекс изначально предусматривает возможность искать информацию в двух других поисковиках - Google и Bing – одним кликом, правда ссылки для перехода в эти поисковики вместе с введённым ключевые запросом ютятся в самом низу страницы результатов поиска.
А вот Google в этом плане более эгоистичен - в его результатах поиска нет никаких упоминаний о поисковиках-конкурентах. Исправить эту ситуацию можно, внедрив в Google Chrome расширение «Альтернативный поиск Google».
Чем постоянно за каждым разом вводить в довесок к ключевому слову «торрент», чтобы получить результаты поиска по торрент-трекерам, проще установить специальное расширение для этих целей TMS (Torrents MultiSearch).
Кнопка расширения внедряется в панель инструментов браузера, и при её нажатии откроется небольшое поисковое поле для ввода запроса.
Результаты поиска появляются в отдельной вкладке, и это будет контент, найденный только на торрент-трекерах Рунета, а не на сайтах-варезниках, софт- и медийных порталах или официальных сайтах.
В результатах поиска по торрент-трекерах найденный контент можно отфильтровать по размеру файла или дате его выкладки. Для сужения поиска можно задать дополнительно ключевые слова.
Результаты поиска также можно смотреть отдельно по конкретным торрент-трекерам и отдельно по таким типам контента, как фильмы, музыка, программное обеспечение.
Помимо этого, расширение TMS внедряется в контекстное меню браузера, чтобы можно было отправить в поиск по торрент-трекерам любое слово или фразу, выделенные на страницах в Интернете без лишней возни с копированием и вставкой.
Контекстный поиск
В Google Chrome внедрена функция контекстного поиска с помощью одного поисковика, установленного в браузере по умолчанию. Увеличить число поисковых систем, с помощью которых можно искать любое выделенное слово на страницах сайтов, призвано расширение «Контекстный поиск».
В расширении изначально присутствует возможность поиска по популярнейшему торрент-трекеру RuTracker, по Википедии и по медийному порталу Kinopoisk.Ru.
Другие поисковики, чтобы через них можно было бы искать информацию прямо из контекстного меню браузера, добавляются в параметрах расширения. Откроем меню Google Chrome, выберем «Настройки» и перейдём в раздел расширений, установленных в браузере.
В перечне расширений выбираем нужное нам – «Контекстный поиск». Жмём ссылку «Параметры».
Поисковые расширения для Opera
Search within the site
Кнопка расширения находится на панели инструментов браузера, и, нажав на неё, можно вызвать поисковое поле для ввода ключевого запроса, а также сменить поисковик.
Предустановленные Яндекс и Google в настройках расширения можно дополнить другими поисковиками. Вызовем на кнопке расширения контекстное меню и выбираем команду «Настройки».
Точно так же, как и в случае с расширением «Контекстный поиск» для Google Chrome, для добавления новой поисковой системы необходимо ввести её URL-строку.
Torrents MultiSearch
Similar image search
Similar image search добавляет в контекстное меню браузера Opera дополнительную команду поиска похожих изображений с помощью нескольких поисковиков.
Или будет представлен список публикаций с похожими картинками.
Поисковые расширения для Mozilla Firefox
Поиск по сайту
Как и в предыдущих двух случаях, специальное расширение для поиска внутри любого сайта в Интернете существует и для браузера Mozilla Firefox.
Только в случае с Огненным Лисом поиск по сайту встраивается в существующее поисковое поле браузера, добавляя перед значком обычного поиска свой значок в виде красного увеличительного стекла.
Смена поисковика по умолчанию для обычного поиска Mozilla Firefox влечёт за собой и смену поисковика и для поиска внутри сайтов.
Расширение «Поиск по сайту» интегрируется в контекстное меню Mozilla Firefox, и, выделив любое «попавшееся под руку» слово, в отдельных результатах поиска можно увидеть все страницы сайта, где это слово присутствует.
Поиск от byffox
Любые программные продукты с такими «ещё не повзрослевшими» названиями, как правило, раздражают многих пользователей тем, что в них ну никак не усматривается даже намёк о целевом назначении предлагаемого инструментария.
И о том, что именно предлагает «Софтина от Васи» или «Репак игрули от Пети», приходится узнавать только при детальном ознакомлении с описанием. Тем не менее, за таким легкомысленным названием, как «Поиск от byffox», кроется полезный и толковый функционал. Это расширение позволяет пополнить контекстное меню браузера дополнительной командой поиска выделенного слова с помощью различных поисковиков.
