Making search form compact for mobile devices
Usually the search form doesn't occupy too much place, but in case of mobile devices it can be a problem.
In this particular task we dicided to make search form compact and expandable for mobile version. So, if the user wants to search something, he/she simply clicks on collapsed text-box. This makes the HTML element of serch form to be focused, which in its turn lets us get an selector (element_selector:focus) to expand it via CSS only (there is no need for additional JS scripting). After mentioning the search icon image address we fix "backround-repeat" in "no-repeat" mode which allows search icon viewed only once. Also, if we add transition duration for different browsers, the text-box will be expanded smoothly.
text-box-selector { background-image: url(/images/search.png); background-repeat: no-repeat; background-position: right; width: 17px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; }
text-box-selector:focus { width: 150px !important; z-index: 2; position: relative; }
After clicking on collapsed text-box the search area which is positioned right and has 17px width will expand to 150 px and the search box will overlay other elements. So, we put z-index property, assign a higher value rather than for the prior element and make positioning - relative to enable overlay.
Note: The parent element's (that contains underlaying elements) positioning should be relative also.