How Can You Design Search Box Which Is Added To Your Website?

September 23rd, 2016 | by Ravi Chahar || 2 Comments |

In the previous tutorial, I have provided the guide to add search box in WordPress theme. But people fret when they see the default output of the search box.

They try to match the appearance of the search box with their website. The color combination and the proper look of the input field and the submit button should be perfect.

In this tutorial, I am going to walk you through a process to design search box using the HTML IDs and classes given in the form.

Design Search Box To Make It Look Much Better.

First of all, you should know the HTML elements using which you have added the search form. If you are using the default WordPress search box then find the IDs and class by right click>>inspect element of the search fields.

Otherwise, if you have created your own custom form then you would have all the necessary HTML elements to target.

When you first display the search box then you would see the default input field, the button, and the label stating “search for:”.

Let me start the work to design search box.

Step 1:- First of all, for a professional website the developer doesn’t like to show any written statement. So it would be good if you remove the label.

The label means the written statement “search for:”. It’s not necessary that every search form has the label element for that.

But if you’re a web developer then you would know what to place. Whether it is written in the “label” tag of HTML or any other, just target it.

Here you are targeting the “label” of the “form”. The absolute position to the left will hide “search for:”. There are many methods to hide it but to maintain the proper working of the search form, it’s the best one.

Step 2:- Now you would see that the input field of the search box won’t look so good with small space. To adjust its width and the height according to the layout of your website.

Whether you add the search box in the footer widget or the sidebar widget, you have to do the proper designing. Add some padding.

The ID is given as “s” for the input field of the search box. To position the search button and the input on the same line, you have to adjust the position of the input field by aligning it.

That’s why we are using vertical-align: top;.

To increase the space in the input field, the top, bottom, left, and right padding is given. If you don’t want to show that black line around the input field then use the “border” property.

Step 3:- The last part is the search button. You have to do the same as you did for the input field. The padding should be provided to make it look bigger and prettier.

To remove the border, use the value to none. You can use the background color for the button.

The position is adjusted as we did for the input field. The background color and the text color is used.

If you want to add the hover effect then you can. It means when someone brings the cursor on the submit button, then the effect would be seen. You can use the change in the background color or anything you want.

I have added the yellowish color. Depending on your choice and the design of your theme, you can choose any color.

The task to design search box has been completed for now. If you want to do any change then it can be done using other CSS properties.

The final output can be seen in the footer widget of this website.

Can You Now Design Search Box For Your Own WordPress Theme?

Whether you have your old theme or the brand new, you can design search box for any. You just have to find out the HTML elements to target.

CSS is an amazing language and you can do this task within a minute. The main thing to remember is the position of the input field and the search button.

You can design search box according to the current design of your website or the new design. If you still face any problem then feel free to ask.