Search box for the site is one of the most important user interface elements on a web page. With it, the user can find the desired content on your site.

In this tutorial, you'll learn how to create markup for a search box using HTML5, as well as how to style form elements using the power of CSS3 without the use of scripts.

1. HTML markup

Element

is a container for the search form, the search field is created using the element or , and the button for sending data to the server can be created using the element or

* (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. Search field with a button inside

* (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. The search field in the style of "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. Search box with a thick bottom border

* (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. Search field with changing border color

* (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. Sliding search field

The search field appears when you click on the icon button.

* (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. Increasing search field

* (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; )

In this tutorial, we will create a drop-down search form that fits perfectly into the interface design for mobile devices. Only CSS will be used to implement the element - no JavaScript or additional markup. simple and effective method to implement a compact search form.

Purpose

On mobile devices, every pixel counts. To minimize the amount of space required to display the form, it will initially be displayed in a compact form and expanded when it receives input focus (:focus ). This approach allows you to save space for other interface elements and content.

HTML markup

The form uses HTML5. The code is very simple:

Resetting the Default Search Form View in Webkit Browsers

By default, in Webkit browsers, the search form will look like this:

In order for the search form to look like a regular text input field, you need to add the following styles:

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; )

Building our search form

The input field will have a regular width of 55px and expand to 130px in the :focus state. The transition property is used for animation and box-shadow is used for the glow effect.

Input ( background: #ededed url(img/search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; /* Default width */ -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; /* Width with input focus */ 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); /* glow effect */ )

Example B

In example B, the search form is significantly minimized - only the icon is displayed without filling text. Notice that the padding and width properties of the search field have changed to form a round button. The color:transparent property is used to make the text invisible.

#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; )

Browser Compatibility

The described method works in all major browsers: Chrome, Firefox, Safari, and IE8+. In IE7 and older browsers, the functionality does not work due to the lack of support for the :focus pseudo-class and the search field type.

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 engines, 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 engines, 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.

For many people, the effectiveness of searching for information on the Internet is the very legs that feed the wolf. Where can I find up-to-date and up-to-date information? Where to buy cheaper and sell more expensive? Where can I find the most accurate instructions for performing certain tasks? Where to watch movies online? In order to answer these and similar questions of users as correctly as possible, search engines from year to year improve the already sophisticated mechanisms for presenting sites in search results for specific user queries. The goal of search engines is to take people to the best possible site to get answers to their questions.

In addition to search engines, search engines themselves are equipped with search filters so that any user can narrow the scope of information search or specify their request.

Consider below some of the search extensions that can be added to popular browsers, and, as a result, increase the efficiency of searching for information on the Internet.

Search Extensions for Google Chrome

Search the current site

Not every site is equipped with an internal search engine, and on such resources you have to run from section to section for a long time in search of specific information. The browser extension for searching within the site is a universal tool that will always be at hand, no matter what site you get to. All you need to do to find the information you need inside a site is to enter a key query in a small search field that appears when you click the extension button on the browser panel.

The search results of the search engine will open in a new browser tab, and pages of a specific site where the keyword occurs will be selected in them.

Search the current site is embedded with a pre-installed Google search engine, but you can set another search engine in the extension parameters - Yandex, Yahoo or Bing. To do this, call the context menu on the extension button and select the "Parameters" command.

The extension options will open in a new browser tab, where we can select a different search engine. And already she will search inside the site.

Alternative Google Search

The Yandex search engine initially provides for the ability to search for information in two other search engines - Google and Bing - with one click, although the links to go to these search engines, along with the entered key query, huddle at the very bottom of the search results page.

But Google is more selfish in this regard - in its search results there is no mention of competing search engines. You can fix this situation by implementing the Google Chrome Alternative Search extension in Google Chrome.

Rather than constantly typing in the appendage to the keyword “torrent” every time to get search results for torrent trackers, it’s easier to install a special extension for these purposes TMS (Torrents MultiSearch).

The extension button is embedded in the browser toolbar, and when clicked, a small search field will open for entering a query.

Search results appear in a separate tab, and this will be content found only on Runet torrent trackers, and not on warez sites, software and media portals, or official sites.

In the search results for torrent trackers, the found content can be filtered by file size or upload date. You can specify additional keywords to narrow your search.

Search results can also be viewed separately for specific torrent trackers and separately for content types such as movies, music, software.

In addition, the TMS extension is embedded in the browser's context menu so that you can send any word or phrase highlighted on the Internet pages to the search for torrent trackers without too much fuss with copying and pasting.

Context search

Google Chrome has implemented a contextual search function using one search engine installed in the default browser. To increase the number of search engines with which you can search for any selected word on the pages of sites, the "Context Search" extension is intended.

The extension initially has the ability to search the most popular torrent tracker RuTracker, Wikipedia and the media portal Kinopoisk.Ru.

Other search engines, so that through them it would be possible to search for information directly from the context menu of the browser, are added in the extension parameters. Open the Google Chrome menu, select "Settings" and go to the section of extensions installed in the browser.

In the list of extensions, select the one we need - "Context Search". Click the "Settings" link.

Search extensions for Opera

Search within the site

The extension button is located on the browser toolbar, and by clicking on it, you can call up the search field for entering a key query, as well as change the search engine.

The pre-installed Yandex and Google in the extension settings can be supplemented with other search engines. Call the context menu on the extension button and select the “Settings” command.

In the same way as in the case of the Context Search extension for Google Chrome, to add a new search engine, you must enter its URL string.

Torrents MultiSearch

Blog Search↓

As a "foundation" for the popup search, I chose a jQuery modal window plugin called Reveal. It is lightweight, without unnecessary elements and is very easy to connect.

Reveal installation.
Links to the script and styles are written in the template section:
Do not forget that there is a png image in the plugin archive, which you need to put in your Picasso album and set the path to it in reveal.css.

The next step is to initialize the plugin" tuning" script(put it there):

Then we define popup content(we put this in the body of the post):

Blog Search↓

paste all the search codes from the article "Searching for a blog with the Google AJAX Search API and jQuery" here.

According to my comment inside this code, copy-paste the entire "google search" there which is now being discussed. In the css stylesheet, you will have to increase the area of the white square.

And the last step is link to modal window, which can be either text or graphic. Link code as an image (also in the body of the post):

At Reveal, a modal window plugin, there are two types of animation: fade and fadeAndPop, adjustable speed of the effect: animationspeed: 300, and the ability to close the entire window by clicking on the dimmed background: closeonbackgroundclick: true.

These settings are written to the "configuration" script (see above):

$("#myModal").reveal(( animation: "fadeAndPop", //fade, fadeAndPop, none animationspeed: 300, //how fast animtions are closeonbackgroundclick: true, //if you click background will modal close? dismissmodalclass: "close-reveal-modal" //the class of a button or element that will close an open modal ));

Or these options can be connected via link on a modal window (see above)

It should be understood that such a scheme search in a separate window- pure experiment and requires more careful customization.

How to write a search string in html. Search extensions for browsers. Resetting the Default Search Form View in Webkit Browsers

1. HTML markup