CSS: how to create a stylish search input box
The search capability in modern web sites is an established feature. Visitors should always have the possibility to look for text or else, and search a whole site for specific things.
A search form can stay anywhere, however, it seems that the best way is to insert the feature on every page, possibly in the top right corner. If we browse all major web sites, we will notice that the search box is always there, ready to be used when needed.
In the following post, we will create a search form and style it a bit. The resulting box will be:
Note that the above is an image, so please do not try to use it.
Ok! Now let's try to build it. We are going to use plain HTML and CSS.
I know it is quite small, but it's all we need.(The above png is meant to be displayed on light background, that is why it won't look great on this page).
The search box, as said, is an input box and a button, all wrapped inside a container div. Let's see the code:
The form has no attribute in the example, you can add them according to your needs.
The input tag has a class="search".
The button tag has a class="button".
And finally the image (l.png) has a class="mg".
We are going to create rules for the container, the search box, the button and the image.
A search form can stay anywhere, however, it seems that the best way is to insert the feature on every page, possibly in the top right corner. If we browse all major web sites, we will notice that the search box is always there, ready to be used when needed.
In the following post, we will create a search form and style it a bit. The resulting box will be:
 |
| Search Box |
Note that the above is an image, so please do not try to use it.
Ok! Now let's try to build it. We are going to use plain HTML and CSS.
First of all the HTML
The HTML behind the search box is plain and simple. We need an input box and a button. The image inside the button will be something like: |
| Magnifying Glass |
The search box, as said, is an input box and a button, all wrapped inside a container div. Let's see the code:
The form has no attribute in the example, you can add them according to your needs.
The input tag has a class="search".
The button tag has a class="button".
And finally the image (l.png) has a class="mg".
We are going to create rules for the container, the search box, the button and the image.
The CSS
Let's start from the beginning: the container div: