People Search Bar render fix in SP2010

Ever wanted to change the People Search Box from this:

To this:

You may have noticed that the css controlling the “People Search Box” web part is incorrect as supplied by Microsoft, the font is too small and the Search Options drop down is rendered incorrectly.

To fix this you can overload the css with this:

<style type="text/css">
    .psrch-OptionsContainer {
        font-size: 8pt;
        height: 130px;
        margin-top: 20px;
        width: 355px;
    }
    .s4-search INPUT.ms-sbplain {
        font-size: 13px;
    }
</style>

There’s quite a few ways of implementing this, you can of course change the css style sheets directly or you could implement it in a Visual Studio project as a feature to the farm to run on page load by attaching it to a DelegateControl like the “GlobalNavigation” delegate.

If you don’t have the ability to do this and only have access to the page you can do it without even using designer. Put a Content Editor web part on the page, on the ribbon bar go to “Format Text” click the HTML drop down and edit the HTML source, put the code above in and you’re done.

Hope it helps