Responsive Search Field

by muthu 2013-10-14 10:38:01

Responsive Search Field

Create an expandable search Field It is suitable for mobile and responsive designs.
Using CSS properties It is a simple and effective way to design a compact search Field.

If you click on the input field, it expands to full width.

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


Default Search Field
search_full.jpg

Expandable Search Field
The search input is further minimized only the search icon is shown without the placeholder text.
Note that I changed the padding and width property on the search input to display a perfect rounded button.
search_icon.jpg
search_half.jpg
Remove Default Search Field add given css code
===================== Css Code =========================
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;
}

516
like
0
dislike
0
mail
flag

You must LOGIN to add comments