Search box

by BamBamm

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/3.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/3.0.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form class="search" method="post" action="#">
  <input type="text" name="search_query" id="search_query" value=""/>
  <input type="hidden" name="Articleid" value="search">
</form>

CSS

#search form:before {
			-moz-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
			color: #7f888f;
			content: '\f002';
			cursor: default;
			display: block;
			font-size: 1.5em;
			height: 2em;
			line-height: 2em;
			opacity: 0.325;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 2em;
		}

		#search form input[type="text"] {
			padding-right: 2.75em;
		}