HTML5 Zone is brought to you in partnership with:

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Paul is a DZone MVB and is not an employee of DZone and has posted 128 posts at DZone. You can read more from them at their website. View Full User Profile

Recreate The GitHub Search Box

04.25.2013
| 6924 views |
  • submit to reddit

In this tutorial we are going to recreate a slide out search box just like what you will find on Github.

GitHub

What's different about this search box is that it will start with a small width and then when the user clicks into it to write their search it uses CSS transition to change the width of the search box.

The whole process of this is quite simple using basic CSS transitions but I think the effect is done really well.

First we have to start off by making our search form, this is very basic and doesn't even have a search button.

<div class="search_form">
<form action="" method="post">
<input type="text" name="search_box" id="search_box" placeholder="Search or type command" />
</form>
</div>

This will create a simple form which just has a textbox inside it. We don't need a search button as this will search when you hit the enter button.

Search Box CSS

First the search box has a grey border with rounded corners. Next we add a slight shadow inside the textbox using the box-shadow property with inset. The search is going to start small and grow wider when you set the focus on the textbox, we set the default width of the textbox which will start at 200px. The padding on the search box will set the padding on the right of the search box to be larger so there is always space type in your search query. Now we can add the transition where we are going to change all CSS properties which will last for 0.2 seconds.

.search_form input[type=text]
{
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	width:200px;
	min-height: 28px;
	padding: 4px 20px 4px 8px;
	font-size: 12px;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}

Focus Event Of Search Box

On the click event of the search box you can change the style of the textbox by using the :focus selector. On the click event of the search box we
want to expand the width of the box and change the colour of the border on the search box.

.search_form input[type=text]:focus
{
	width: 400px;
	border-color: #51a7e8;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
	outline: none;
}

The Search Box

This is the outcome of CSS code to recreate the Github search box, use it on your website.

Published at DZone with permission of Paul Underwood, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)