HTML5 + css3 creates a cool search box that automatically obtains focus and supports voice input

With the popularity of HTML5, more and more new functions are applied. The combination of HTML5 and css3 can easily achieve many cool effects. This article explains how to use HTML5 and css3 to create a cool search box that automatically obtains focus and supports voice input.

Html

We place a search form Form on the page with an input box and a search button respectively.
<Form action = "#" method = "get" class = "search_form">
<Input type = "text" name = "S" class = "sinput" Placeholder = "Enter the carriage return to search" autofocus X-WebKit-speech>
<Input type = "Submit" value = "Search" class = "sbtn">
</Form>

Carefully, you will find three more attributes in the input box, namely placeholder, autofocus, and X-WebKit-speech, which have different functions.

Placeholder: it is used to set the initial value and the color of the initial value is gray. When the input content in the input box changes, the value disappears.

Autofocus: Auto Focus. When you enter the current page, the search input box automatically obtains the focus. You can enter a keyword and press the Enter key to search the page. When autofocus appears more than twice, the browser selects the input focus of the last input box with the autofocus attribute.

X-WebKit-speech: A speech recognition tool exclusive to WebKit-core browsers (such as chrome). After X-WebKit-speech is used, a microphone will appear on the right of the input box, click the microphone and the prompt "start talking" will be displayed. You can enter the speech through the microphone. the browser automatically recognizes the speech content and displays the recognition result in the input box.

Previously, we needed to use a large section of JavaScriptCodeThe interaction between the focus and the input cursor is removed from the input box. To use HTML5, you only need to set several attributes and everything is OK.
CSS

Setting attributes and implementing functions alone is not enough. We can use css3 to beautify the search box to make it more friendly.
. Search_form {position: relative; Height: 31px; margin: 60px; display: inline-block ;}
. Search_form: hover {-WebKit-box-Shadow: 0 0 3px #999;-moz-box-Shadow: 0 0 3px #999}
. Sinput {float: Left; width: 200px; Height: 21px; line-Height: 21px; padding: 4px 7px; color: b3b3b3;
Border: 1px solid #999; border-radius: 2px 0 0 2px; Background-color: # fbfbfb ;}
. Sbtn {float: Left; width: 50px; Height: 31px; padding: 0 12px; margin-left:-1px;
Border-radius: 0 2px 2px 0; Border: 1px solid # 4d90fe; Background-color: # 4d90fe; cursor: pointer;
Display: inline-block; font-size: 12px; Vertical-align: middle; color: # f3f7fc; position: absolute ;}
. Sbtn: hover {Background: #4084f2}

We use css3 to set the shadow effect on the search box, the rounded corner effect of the input box, and the effect on the mouse sliding of the Search button. Of course, to be compatible with other browsers, you may need to perform some processing on CSS, just like the helloweba search box on this site.

well, let's see the final result. You can copy the Demo code and apply it to your website.