/ Published in: CSS
This is the quickest way to style the search bar. It involves creating one single image that includes both the input area and search button.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!--in master page , replace --> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/> </asp:ContentPlaceHolder> <!--with --> <div class="s4-notdlg" id="searchBoxOuter"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/> </asp:ContentPlaceHolder> </div> <!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. --> <style type="text/css"> #searchBoxOuter {width:215px; height:27px; background: url('images/searchBox.png') no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/} /*#searchBoxOuter:hover { background: url('images/bg-search.png') 0 -30px no-repeat;}*/ .s4-search INPUT.ms-sbplain {background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important; font-style:italic;} .s4-search .srch-gosearchimg { background-color:transparent; background-image:none; visibility:hidden;} input.s4-searchbox-QueryPrompt {font-size:13px !important; } </style>