Using CSS to customize the look of a SharePoint Search Box Web Part

I recently received a request from one of our users about dropping a Search Box web part on a page of their site that would provide users with the ability to search for local content on this site.  This typically isn't a problem; however, in this situation, we already had a Search Box web part installed on the site via the master page with a rather heavily customized look.  Unfortunately, that look didn't go well at all with this new web part so, to fix the problem, I dropped an Embed Code/Script Editor web part at the bottom of their web page and added the following CSS that brought the Search Box back to a more "normal", but slightly customized look:

Here's the look they wanted (nothing really fancy, as you can see):

Here's the CSS:

<style>
   #WebPartWPQ2 #SearchBox {
      width: 650px;
   }

   #WebPartWPQ2 .ms-srch-sbLarge > .ms-srch-sb-searchLink {
      background-color: #fff;
      float: right;
      color: #fff;
      text-decoration:none;
      height: 24px;
      width: 33px;
   }


   #WebPartWPQ2 .ms-srch-sbLarge>input {
      border: 1px solid black;
      border-radius: 5px;
      font-size:16px;
      height:30px;
      width: 600px;
      margin: 0px 0px 0px 0px;
      padding: 5px 1%;
   }

   #WebPartWPQ2 .ms-srch-sbLarge-searchImg {
      position: relative;
   }
</style>

NOTE: I'm specifically targeting their web part's ID, WebPartWPQ2; therefore, you'll want to change that to reflect the ID of you web part or remove it if you want all Search Boxes to inherit that particular look.

Centering an image horizontally using CSS

If you ever need to horizontally center an image on your web page, here is a simple way to do that via CSS:

<style>

.image_Container {
    display: block;
    margin-left:auto;
    margin-right: auto;

    /* BONUS - Add a stylish border around your image */
    border: 3px solid #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.15);
    /* For IE 8 */
    border: 1px solid #EFEFEF;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";

</style>

...
<img class='image_Container' src='pictureUrl' />

As a bonus, I also included some CSS that will place a "stylish" border around the image, but feel free to drop that section if you'd prefer not to have a border around it.

How to define the CSS class that should be used during an onMouseOver or onMouseOut event for a web control

In case you would ever like to leverage an existing CSS class for your web control whenever an mouse event is triggered (i.e. onMouseOver or onMouseOut), here is a quick example of how to do that:

<input type="button" class="ui-state-default ui-widget-content" onMouseOver="this.className='ui-state-default ui-widget-content ui-state-hover'" onMouseOut="this.className='ui-state-default ui-widget-content'" value="Submit" id="btnSubmit" onClick="SubmitForm();" />

NOTE: In the above example, I'm leveraging the CSS classes that are already defined for a jQuery UI Calendar control that exists on another part of the page.  By leveraging those CSS classes for my control, I can keep the look and feel of all controls on the page as consistent as possible.

Also, there may come a time when you need to assign the CSS classes a web control uses via Javascript code. In the following example, I'm using a Javascript function to specify the CSS classes that will be programmatically defined for the given control based on the isSelected value (i.e. whether or not the control has been selected):

function SetButtonStyle(controlId, isSelected) {
     if (isSelected) {
          document.getElementById(controlId).onmouseout = "this.className='ui-state-default ui-state-highlight ui-state-active'";
          document.getElementById(controlId).onmouseover = "this.className='ui-state-default ui-state-highlight ui-state-active'";
          document.getElementById(controlId).className = "ui-state-default ui-state-highlight ui-state-active";
      }
      else {
          document.getElementById(controlId).onmouseout = "this.className='ui-state-default ui-widget-content'";
          document.getElementById(controlId).onmouseover = "this.className='ui-state-default ui-widget-content ui-state-hover'";
          document.getElementById(controlId).className = "ui-state-default ui-widget-content";
      }
}