To customize your search box, open searchform.php. If you do not have a searchform.php, WordPress is using it’s built in search form, which you can customize but it might not be as flexible. I’d recommend that you create your own searchform.php so we can customize as needed.
In searchform.php, we’ll have something that looks like this:
Note that we’ve added a couple of classes to our code which will allows us to style the search box as we like – specifically class=”textInput” and class=”searchSubmit”. Defining these classes will let us call them in our stylesheet. This will allow us to introduce padding and margins if needed.
To add a custom search button, we’ll be playing around with the code
In this code, we’re saying that our search button is located in our template’s image folder. Upload your search button image into your template’s images folder, then update the link of the src to the location of your button.
There are some things we can do to modify the input box. Increase the number after ‘size’ to make the input box larger, and decrease it to make it smaller. If you want to add a background color or a border to your input box, you can use CSS to tweak the class textInput.