Skip to main content

Pure css full width search bar with animation

Pure CSS full width search bar with animation

With full width search bar, your design looks good with small scale devices like mobile and tablets. Let’s make this for desktop browsers too.

But most people don’t prefer to use full width search for desktop’s.

With proper aesthetic and css3 animation even it looks good with desktop also.

DemoDownload

Basic idea behind Full Width Search

For icons i used font awesome icon font. If you don’t know what icon fonts are then please read Font Awesome icon font.

Here is the step by step HTML element placement.

  • We floated the element <label> with search icon at right of the screen. Immediate after the float is cleared to make other element align below to it.
  • The toggling of search bar is done using checkbox. Basically, the checkbox is hidden and it is linked to element <label> using for property. Now, the <label> act as toggle button.
  • Below, we placed element <div> with 100% width and box-sizing property set as border-box to make sure the inside element does not go out of it’s width. Initially, this element is scaled to 0 and display as none.
  • Inside above element we have <input> element for search queries and an icon which comes left to the <input> element.
  • Finally, the animation is applied on search bar for button toggle.

HTML

<header>
  <div class="wrapper">
    <div class="wrapper-right">
      <label class="fa fa-search search-icon" for="tag-search"></label>
    </div>
    <div class="clear"></div>
  </div>
  <input type="checkbox" id="tag-search"/>
  <div class="search-box"> <i class="fa fa-search"></i>
    <input type="text" placeholder="Search..."/>
  </div>
</header>

CSS

* {
	padding:0;
	margin:0;
}

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	background-color:#FFF;
}

header {
	width:100%;
	z-index:1000;
}

.clear{
	clear:both;
}

#tag-search {
	display:none;
}

.search-icon{
	padding:20px;
	cursor:pointer;
	background-color:#EEE;
	float:right;
}

.search-box{
	position:relative;
	background-color:#EEE;
	padding:10px;
	clear:both;
	transform: scale(0);
	transform-origin: 100% 0%;
	display:none;
}

.search-box i{
	position:absolute;
	font-size:30px;
	vertical-align:middle;
	padding:10px;
}

input[type="text"]
{
	width:100%;
	height:50px;
	font-size:30px;
	background-color:#EEE;
	border:none;
	padding-left:50px;
	box-sizing:border-box;
}

input:focus{
	outline:none;
}

#tag-search:checked + div.search-box {
	display:block;
 animation: trans-in 1s ease;
 animation-fill-mode: forwards;
}

@keyframes trans-in {
 from {transform: scaleY(0);}
 to {transform: scaleY(1);}
}

Gururaj P Kharvi

An Entrepreneur, Web and Android developer from India.

One thought on “Pure css full width search bar with animation

Leave a Reply

Your email address will not be published. Required fields are marked *