Over a million developers have joined DZone.

Recreate The GitHub Search Box

· Java Zone

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

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.

Bitbucket is the Git solution for professional teams who code with a purpose, not just as a hobby. Get started today, it's free.


Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}