Over a million developers have joined DZone.

Recreate The GitHub Search Box

DZone's Guide to

Recreate The GitHub Search Box

· Java Zone ·
Free Resource

Java-based (JDBC) data connectivity to SaaS, NoSQL, and Big Data. Download Now.

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.

Connect any Java based application to your SaaS data.  Over 100+ Java-based data source connectors.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}