Responsive Search Field
by muthu[ Edit ] 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
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.
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;
}
