Expanding Search Bar Using CSS & HTML

Expanding Search Bar CSS & HTML (No JS)

by

Many of us might have noticed websites that have a search bar which expands on click by the user. It’s that amazing and convenient. Moreover it gives a responsive look to our websites and make it very interesting and serves a great user experience with beautiful animation.

In this tutorial, we are going to create one such search bar. Let’s sum up an overview of what exactly we are going to create here today:

  • Initially, we’ll have only a search button with a search icon on it.
  • While clicking the search icon, the search input should pop out towards the right of the icon.
  • The input box should disappear when the search box is clicked again.
  • We have to accomplish this task without using JavaScript.

See the Pen Untitled by Lakshmi K Sathyan (@lakki0704) on CodePen.

Enough of theory, let’s get into the coding part.

Create an HTML file and get ready with the boiler template.
Inside the body section add:

HTML Code for Expanding Search Bar:

<div class="search-container">
<form action="/search" method="get">
    <input class="search" id="searchleft" type="search" name="q" placeholder="Search">
    <label class="button searchbutton" for="searchleft"><span class="mglass">&#9906;</span></label>
  </form>
</div>

This is the output which we will see, without adding CSS.

Now let’s add CSS, make sure to link your CSS file in your HTML file to see the changes.

body {
	font-family: sans-serif;
	background-color: #111;
}

.button {
	display: inline-block;
	margin: 4px 2px;
	background-color: #444;
	font-size: 14px;
	padding-left: 32px;
	padding-right: 32px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: white;
	text-decoration: none;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button:hover {
	transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	background-color: white;
	color: black;
}

.search-container {
	position: relative;
	display: inline-block;
	margin: 4px 2px;
	height: 50px;
	width: 50px;
	vertical-align: bottom;
}

.mglass {
	display: inline-block;
	pointer-events: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
}

.searchbutton {
	position: absolute;
	font-size: 22px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.search:focus + .searchbutton {
	transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	background-color: white;
	color: black;
}

.search {
	position: absolute;
	left: 49px; /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
	background-color: white;
	outline: none;
	border: none;
	padding: 0;
	width: 0;
	height: 100%;
	z-index: 10;
	transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
}

.search:focus {
	width: 363px; /* Bar width+1px */
	padding: 0 16px 0 0;
}

Yes we are done. Let’s see how our search bar will look on the website.

Hope the code is clear, and you enjoyed building an amazing interactive search box.

Demo – Codepen

Leave a Comment