AndroidCSS

Android material design Programming Blog

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 web browsers in desktops.

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

DemoDownload

The 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 the right of the screen. Immediate after the float is cleared to make other elements align below to it.
  • The toggling of search bar is done using checkbox. Basically, the checkbox is hidden and it is linked to the element <label> using theĀ for property. Now, the <label> act as a 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 its 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 to 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);}
}

Leave a Reply

Your email address will not be published.

*

About | Policy | Disclaimer

Creative Commons LicenceUp ↑