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.