| If you'd like to modify the search box in a WSS site, change the background color, size, etc. there are a few options you have to do so. Using just the CSS you can change a few things to customize this control. My first example removes the drop down menu to the left of the search box and thus the search bar takes up less space on your page. You can accomplish this by changing the select.ms-searchbox style and adding the display:none tage to hide it. 
If you also wanted to change the background color of your search box to match the blend into the background of your page for instance, you could do that as well by modifying the .ms-searchbox, select.ms-searchbox, and .ms-searchcorner styles. The search image can also be hidden by adding the display:none tag to the .ms-searchimage style. Here I've chosen to show the drop down, but hide the search image and changed the background color to black to match my page background. I can also hide the drop down menu by using the display:none tag on the select.ms-searchbox style as well. 
The only piece that is not able to be modified in CSS is the search image. If we want to change that image we will have to modify files on the server itself or add a new style there to accommodate our custom search image. However, using simple CSS mods you can achieve a search bar that integrates well with any design. |