Question

I’m developing a Search Application where the requirement is to have a magnifier image instead of button on the search textbox.

On a maximized page the anchor seems to be on correct place.

But on browser resize (clicking restore down button next to close button) the search textbox looks like this:

Following is my CSS code (I’m not a CSS guy btw :))

.search_div A 
{
 background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
 border: 1px solid #CCCCCC;
 height: 11px;
 left: 85.8%;
 margin-right: 175px;
 padding: 6px 5px 4px 20px;
 position: fixed;
 top: 32px;
 width: 0;
}

Please suggest.

Answer 1

You don’t show the full markup for you search button/input so it’s difficult to know exactly how how you exactly position the search button.

Here how I would do it. Let’s say you have the followin markup:

<div class="search_div">
    <a href="#">Search</a>
    <input type="text" />
</div>​

For the wrapping DIV, the key is to explicitly position it relative:

.search_div { 
    position: relative;
    border: 1px solid LightGrey; 
    width: 300px;
}

For the search button, make it absolute with a left value equal zero so it sticks to the left side.

.search_div A {
    background: url(icon.gif) no-repeat scroll center center #FFFFFF;
    border: 1px solid #CCCCCC;
    width: 16px;
    height: 16px;
    left: 0;
    position: absolute;
    text-indent: -99999px;
}

As the anchor is absolute positioned, the input will be underneath. The trick is to pad the left side of the input to a value a bit higher than the anchor width, so the beginning of the text is not hidden underneath the anchor:

.search_div input {
    box-sizing: border-box;
    border: 0;
    outline: 0;
    line-height: 16px;
    width: 100%;
    padding-left: 20px;
    padding-right: 3px;
}

DEMO

---

You can go further with this technique then by having the possibility through css to show the search icon to the left or to the right by applying an additionnal class to the .search_div container.

Stick left or right the search icon:

.search_div.iconleft a {
    left: 0;
    right: auto;
}

.search_div.iconright a {
    left: auto;
    right: 0;
}

Adjust the padding of the input also left or right:

.search_div.iconleft input {
    padding-left: 20px;
    padding-right: 3px;
}

.search_div.iconright input {
    padding-right: 20px;
    padding-left: 3px;
}

DEMO