I am currently creating a custom WordPress theme. I had the HTML/CSS built first and I am in the process of converting it into theme compatible code.
One of the problems I had to solve was displaying custom search form html in a WordPress sidebar. While searching for a solution I saw that some people turned to creating custom css for existing search form html while others even suggested modifying WordPress core code, something that’s definitely a big no-no.
The solution is actually a lot simpler.
From the WordPress codex:
Different WordPress Themes feature different template files. Some include a search.php template file. This is not a Search Page, it is merely a template that displays the search results. There is also a template file called searchform.php. This is a template file that is often included in the sidebar of many themes and generates the search box form. If there isn’t one in your theme, you can easily copy it from the Default theme.
So, in order to have custom html for the search widget in your sidebar, simply include a searchform.php file in your theme and customize it to your liking.
Note: The controls need to retain the attributes (actions, methods, ids and names) that the default search form uses, so your form must have method get and id searchform, and your inputs ids s and searchsubmit respectively.