<div>
the good news; yes, the search box can be modified. &nbsp;The maybe bad news; you need to use the browser development tools and determine which css to modify and if you do want something more apply jQuery styling and bells and whistles.<br />
<br />
Do you know how to modify css on SharePoint pages?
</div>


<div>
Yes. &nbsp;I have been branding the site by noodling with dev tools and jQuery to play with the master page and built a CSS file plus some jQuery mods into the master page as a result.<br />
<br />
The search widget is a 7 levels deep DIV nightmare.
</div>


<div>
I had found that link and tried to modify the HTML template associated with the search, but it didn't have any affect. &nbsp;Also, &nbsp;I tried to roll back to the OOTB file and that failed telling me that the file was in use and so I couldn't replace it...
</div>


<div>
You may need to modify the procedure because of variations in your environment.
</div>


<div>
My environment is SharePoint online (OOTB).
</div>


<div>
The article as well as my experiences are with SharePoint on-premise. I am not sure how to do it with SharePoint online. <br />
<br />
Good luck...
</div>


<div>
This aspect, &nbsp;one would think (apparently not), &nbsp;would be much the same. &nbsp;Both are SharePoint 2013, &nbsp;they both have masterpage folder and themes folders and all the pieces called out. &nbsp;But somehow it just doesn't seem to work. &nbsp;I have trashed the magnifier, putting another image in it's place, &nbsp;but the image isn't the size and in the position on a grid of images that the code wants or expects.
</div>


<div>
Here is my latest attempt at modifying the magnifier. &nbsp;<br />

<pre><code class="code-1 nolinks" id="code-20-41831947-1"><span>var oldSrc = &quot;/_layouts/15/images/searchresultui.png?rev=44#ThemeKey=searchresultui&quot;;</span>
<span>var newSrc = 'https://mysitehost/sites/PublishingSandbox/_catalogs/masterpage/HCP/customGo.png';</span>
<span></span>
<span>$('img[src=&quot;' + oldSrc + '&quot;]').attr('src', newSrc);</span>
</code></pre>
<br />
This code runs and replaces the magnifier with a blank image, not the image I specified (and confirmed it exists). &nbsp;Also, &nbsp;the search button no longer drops down the filter.<br />
<br />
So, &nbsp;the code above finds the image, replaces it (poorly) and then the search magnifier no longer works.
</div>


<div>
<div class="content wysiwyg-content">
I am looking to rebrand a SharePoint site. &nbsp;One task is to modify the Search Box. &nbsp;I need to change the search magnifier, the search textbox and the dropdown of filters.
</div>
</div>


I am looking to rebrand a SharePoint site.  One task is to modify the Search Box.  I need to change the search magnifier, the search textbox and the dropdown of filters.

SharePoint 2013 Searchbox Branding

Microsoft Sharepoint is a software platform and family of software products used for collaboration and web publishing combined. These capabilities include developing web sites, portals, intranets, content management systems, search engines, wikis, blogs, and other tools for business intelligence and collaboration. SharePoint has a Microsoft Office-like interface, and it is closely integrated with the Office suite.

Microsoft SharePoint

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Office 365 is a group of software plus services subscriptions that provides productivity software and related services to its subscribers. Office 365 allows the use of Microsoft Office apps on Windows and OS X, provides storage space on Microsoft's cloud storage service OneDrive, and grants 60 Skype minutes per month. Office 365 includes e-mail and social networking services through hosted versions of Exchange Server, Skype for Business Server, SharePoint and Office Online, integration with Yammer, as well as access to the Office software. All of Office 365's components can be managed and configured through an online portal; users can be added manually, imported from a CSV file, or Office 365 can be set up for single sign-on with a local Active Directory using Active Directory Federation Services.

Microsoft 365

Cloud services are services made available to users via the Internet from a provider's servers. Cloud services are designed to provide easy, scalable access to applications, resources and services, and are fully managed by a cloud services provider. It is a model for enabling ubiquitous, on-demand access to a shared pool of configurable computing resources. Frequently offered cloud services are infrastructure-as-a-service (IaaS), desktops-as-a-service (DaaS), software-as-a-service (SaaS) and platform-as-a-service (PaaS). Examples of cloud services include online data storage and backup solutions, Web-based e-mail services, hosted office suites and document collaboration services, database processing, managed technical support services and more.

Cloud Services

Microsoft Azure is a cloud computing platform and infrastructure for building, deploying and managing applications and services through datacenters. It provides both platform-as-a-service (PaaS) and infrastructure-as-a-service (IaaS) services and supports many different programming languages, tools and frameworks, including both Microsoft-specific and third-party software and systems. Cloud Services is a PaaS environment and can be used to create scalable applications and services; there are specific software development kits (SDKs) provided by Microsoft for Python, Java, Node.js and .NET. Azure also has file and storage services, data management, analytics and DNS services.

Azure

Cloud computing, also known as on-demand computing, is a kind of Internet-based computing where shared resources and information are provided to computers and other devices. It is a model for enabling ubiquitous, on-demand access to a shared pool of configurable computing resources. Cloud computing and storage solutions provide users and enterprises with various capabilities to store and process their data in third-party data centers, relying on sharing of resources to achieve coherence and economies of scale.

Cloud Computing

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.