Simple Search Bar

HTML

CSS

body {
	background: #61646d;
	color: #000;
	font: 14px/1.5em "Open Sans", sans-serif;
	margin: 0;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

input {
	border: none;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5em;
	margin: 0;
	outline: none;
	padding: 0;
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
	content: "";
	display: table;	
}
.clearfix:after { clear: both; }

.container {
	height: 44px;
	left: 50%;
	margin: -22px 0 0 -141px;
	position: absolute;
	top: 50%;
}

/* ---------- SEARCH ---------- */

#search {
	background: #42454e;
	border-radius: 3px;
	display: inline-block;
	padding: 7px;
}

#search input {
	float: left;
}

#search input[type="search"],
#search input[type="submit"] {
	border-radius: 3px;
	font-size: 12px;
}

#search input[type="search"] {
	background: #fff;
	color: #42454e;
	min-width: 184px;
	padding: 6px 8px;
}

#search input[type="submit"] {
	background: #1bba9a;
	color: #fff;
	font-weight: bold;
	margin-left: 7px;
	padding: 6px 10px;
}

#search input[type="submit"]:hover {
	background: #189e83;
}

#search input[type="search"]::-webkit-input-placeholder { color: #42454e; }
#search input[type="search"]:-moz-placeholder { color: #42454e; }
#search input[type="search"]:-ms-input-placeholder { color: #42454e; }

JavaScript

Simple Search Bar

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Simple Search Bar

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Share Code