sharepoint 2010:如何修改search box的樣式

方法一，使用jQuery修改search box的icon

1.sharepoint 2010的master page上，search box是使用DelegateControl來生成的，  

   <div id="s4-searcharea" class="s4-search s4-rp">
   <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
   </asp:ContentPlaceHolder>
   </div>

實際上是：
< a id="ctl00_PlaceHolderSearchArea_ctl01_S3031AEBB_go" title="Search" href="javascript:S3031AEBB_Submit()">

<img title="Search" class="srch-gosearchimg" οnmοuseοver="this.src=‘\u002f_layouts\u002fimages\u002fgosearchhover15.png ‘” οnmοuseοut="this.src='this.src='\u002f_layouts\u002fimages\u002fgosearch15.png’“ alt="Search"  style="border-width:0px;" />

</a>
2.按照Sharepoint 2010:如何在Master page引用jQuery文章添加jQuery引用，此處將採用jQuery來修改go search的圖片。

3.在Master page中添加

<script type="text/javascript">
  $("document").ready(function() {
        $(".srch-gosearchimg").attr({src:"/_layouts/images/CustomStyles/gosearch.gif", alt:"go search"}).removeAttr("onmouseover").removeAttr("onmouseout");
     });
</script>
進行轉換image和去除"onmouseout”和"onmouseover"屬性。

4.完畢。

方法二，按照參考資料1，操作過，但是沒有成功獲取圖片地址。

若有更好的方法，請留言，謝謝！

參考資料：

1.http://labs.steveottenad.com/reskin-restyle-a-sharepoint-2010-search-box/

2.http://blogs.msdn.com/b/pavankumar/archive/2009/03/24/customizing-small-search-box.aspx

3.http://www.hectorportillo.com/2010/05/go-search-sharepoint/