<body>
	<div id="search">
		<form id="searchform" action="">
			<input class="insearch" type="text" placeholder=" Search...">
			<span class="fa fa-search" aria-hidden="true"></span>
		</form>
	</div><!--search-->
	</body>
</html>
body, html{
	margin:0;
	padding:0;
}
#search{
	width: 100%;
	height: 100px;
	margin:auto;
	background-color: blue;
	text-align: center;
	padding: 30px 0px;
	box-sizing: border-box;
	position: fixed;
	top:0;
	left:0;
}
#searchform{
	width:20%;
	margin:auto;
	position:relative;
}
#search .insearch{
	width: 100%;
	height: 40px;
	font-size: 11px;
	padding: 2px 20px;
	background-color: #e6ecf0;
	border: 1px solid #e6ecf0;
	border-radius: 20px;
	box-sizing: border-box;
}
#search .fa{
	color: #CCC;
    position: absolute;
    right: 20px;
    top: 12px;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
  2. https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/1.3.1/css/fontawesome-iconpicker.css

External JavaScript

This Pen doesn't use any external JavaScript resources.