Recreate The Github Search Box

In this tutorial we are going to recreate a slide out search box just like what you will find on 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" />

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);

	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.

Back to top

Fastest WordPress Hosting With WPEngine

Stunning speed, powerful security, and best-in-class customer service. At WP Engine.

Risk free for 60 days