Every website should have a search box for end users to find a relevant phrase / topic for which the user has come to it. Software is built to ease the navigation of the topic or subject but sometimes it is relatively easy for users to find the relevant subject with the help of a search box provided if website is heavy content-loaded.
One can show the search section in on top of the page or sometimes left or right. It may be fancy but it should be working else users will leave the website in no time. I have seen some of the coding on the Internet especially on Codepen.io and want to list them here for your benefit. These are coded by good designers and I am sure it will help you to decide which one you should be adding on your website.
Beautiful Search Box Design Example Listed Below
Some Design Collection May You Like:
Expending Text Box Button
A better circle click for a search box and reposition after clicking outside is a good one from Sam Daitzman using scss coding and mobile touch start.
A dribble resembled search box which is looking very nice with separate search input box and a button in Indigo. This design is coded by Cameron Baney.
Self-Adjusting Search Bar
A very good looking and well coded search box is done by Grant Zabriskie which has option to select category under which the search is being made. Very very elegant coding that will impress you much. This is done under SCSS coding.
Search box icon animation
Search Bar Transform
This is coded under a circle with a search icon and which clicked it expands. The CSS coding is in scss though a nice show by Adrien Martinet.
Static Search box
A very simple search box is displayed but it is coded to display a very quick search effects by Isgrrd.
Simple Search Bar
A real time search engine is coded in which it does Wikipedia search after few topics are entered and it yields results. A good looking code has been done by Thomas.
Simple Search Bar Blue
A very simple search with a placeholder text and magenta colored search box. This simple design is coded by Emily Huang.
Search Engine Thing Design search box
A search engine type of display has been coded by Samuel Li. It is very elegant and real time search effects are coded. You must have a look at this search effect.
Search menu with top
A different and nice looking search fixed at top, in which a search box appears after one click on the search icon on top right. It is friendly with a mobile resolution. The coding is a creation of BJack.
Search Bar full popup div
A search bar is coded by Mohmoud Elmahdi in which when a search icon is clicked it overlays the background and a search input box appears for searching. It can be closed using a close button on right.
Cool Search Bar on Dark Background
An old fashioned cool looking code has been done by Vipul Anand without any extra markup. A background pattern has been given around the search box and a button inside the search box itself.
Daily UI Big Search Bar
A big search box has been created by Mark Howard in the above link coding. A SASS coding has been implemented to achieve this.
Animated Search bar