HTML5 practice-scalable mobile search box

Document directory

• Purpose
• HTML code
• Reset WebKit default search input box
• Set input box style
• Example B
• Browser compatibility

Reprinted please specify original address: http://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html

 

Today, I will introduce how to use CSS to create a scalable mobile search box. It is very suitable for mobile's responsive design. This tutorial does not use JavaScript and only uses the native CSS attribute. Therefore, this is a very simple and efficient implementation.

Demo preview: http://webdesignerwall.com/demo/expandable-search-form/

 

Purpose

To display information on mobile devices, you must cherish every inch of the screen. For example, the design of the search box is usually in the shrinking State. It is extended only when activated, so that more display areas can be provided for other elements on the screen. This is the task to be completed in this course. Let's first look at one:

The best web gallery on my site has a similar design. When the query button is clicked, The jquery focus event is triggered to gradually enter the search box.

 

HTML code

The following code uses the HTML5 search Tag:

<form>    <input type="search" placeholder="Search"></form>

 

Reset WebKit default search input box

The default WebKit input box style is as follows:

To remove the default effect and make it look more like a text input box, we need to add the following CSS:

input[type=search] {    -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;}

 

Set input box style

I will not explain each CSS statement line by line. Here I only emphasize a few points. The search Width I set by default is 55px. It will be extended in the focus state and the width will change to 130px. The transition attribute implements the animation effect. Box-shadow is used to emit light on the input box.

Example B

In Demo B, the search box is minimized and only one query icon exists without text input. I changed the padding and width attributes of search to display a perfect circle button. I also use color: transparent to hide text areas.

 

Browser compatibility

It runs normally on all mainstream browsers, such as chrome, Firefox, Safari, and IE8 +. However, IE7 and earlier browsers are not supported, because IE cannot recognize the search input box and does not support the focus pseudo class.

 

Address: http://webdesignerwall.com/tutorials/expandable-mobile-search-form

 

HTML5 practice series