Styling of a search form is challenging at times. The default styling is very basic and an awful lot of the required styling depends on the CSS Reset used. The following is the styling I use on most of the WordPress themes I develop.
Without any styling the search form appears as follows:
Because I normally do not show the word ‘Search’ on the search submit button, I show a Dashicon instead, I need to change the default HTML in WordPress. To do this I need to code the following in a new file.
This file I name searchform.php and add it to the root directory of my theme.
All that is left now is the styling of the search form.
I normally want all my buttons to have the same look and feel. If you want to change this you will have to exclude the styling for the buttons to include only the submit button.
I always use ‘mobile first’ styling so you will notice that on small screens my search form has a width of 100% but on bigger screens the maximum width is 400px.
In the styling for the placeholder text you will notice a lot of repeated styling. These should stay separate or you will pick up problems making the placeholders show correctly across different browsers.
You will obviously have to change the colours I used here to suit your own needs.
The completed search form will look as follows:
There you have it, a simple basic styling which you can now change however you please. You might want to hide the submit button completely, you might want to use Genericons instead of Dashicons, you might even want to use an image in the submit button, you might want different widths or you might want to use different colours.
I do hope you can find a use for this bit of styling. Thanks for visiting.