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
×

Simple Search Bar×

Settings×

Share Code

Simple Search Bar
×

Settings
×