Quick Search Styles | Agent Image UIX

Main Content

Quick Search Style 1

Close

HTML

<section class="aios-quick-style-1">
	<div class="quick-search-style-1">
		<h2>Quick <strong>Search</strong></h2>
		<form action="#" method="get">
			<select name="Property Type">
				<option value="Property Type">Property Type</option>
			</select>
			<select name="City or ZIP">
				<option value="City or ZIP">City or ZIP</option>
			</select>
			<div>
				<select name="Beds">
					<option value="Beds">Beds</option>
				</select>
				<select name="Baths">
					<option value="Baths">Baths</option>
				</select>
			</div>
			<div>
				<select name="Min Price">
					<option value="Min Price">Min Price</option>
				</select>
				<select name="Max Price">
					<option value="Max Price">Max Price</option>
				</select>
			</div>
			<input type="submit" value="Search">
			<a href="#">Advanced</a>
		</form>
	</div>
</section><!-- end of quick search style 1 -->

CSS

.aios-quick-style-1{
	position: relative;
}
	.aios-quick-style-1 .quick-search-style-1{
		width: 100%;
		max-width: 263px;
		background: #d7d7d7;
		margin: 0 auto;
		padding: 22px 22px 51px 22px;

	}

	.aios-quick-style-1 h2{
		font-weight: 300;
		font-size: 20px;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		padding: 18px 0;
	}
		.aios-quick-style-1 h2 strong{
			font-weight: 500;
			font-size: 30px;
			display: block;
			line-height: 25px;
		}
	.aios-quick-style-1 form{
		display: block;
		width: 100%;
		font-size: 0;
	}
		.aios-quick-style-1 select{
			width: 100%;
			height: 34px;
			border: none;
			background: #fff;
			outline: none;
			color: #b7b7b7;
			font-size: 12px;
			cursor: pointer;
			margin-bottom: 2px;
		    padding: 6px 10px;
			-webkit-appearance: none;
			-moz-appearance:    none;
			appearance:         none;
			background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
			background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
			background-size: 5px 5px, 5px 5px, 1px 1.5em;
			background-repeat: no-repeat;

		}
			.aios-quick-style-1 form div select{
				display: inline-block;
				vertical-align: top;
				width: 49.5%;
				margin-left: 1%;
			}
					.aios-quick-style-1 form div select:first-child{
						margin-left: 0;
					}
		.aios-quick-style-1 input[type="submit"]{
			height: 34px;
			background-color: #009bbb;
			border: none;
			width: 100%;
			font-size: 12px;
			color: #fff;
			outline: none;
			margin-top: 20px;
			transition: all .25s ease-in-out;
			-moz-transition: all .25s ease-in-out;
			-webkit-transition: all .25s ease-in-out;							        

		}
			.aios-quick-style-1 input[type="submit"]:hover{
				background: #0cabcc
			}
		.aios-quick-style-1 a{
			display: block;
			text-decoration: none;
			height: 34px;
			background-color: #b7b7b7;
			border: none;
			width: 100%;
			font-size: 12px;
			color: #fff;
			outline: none;
			transition: all .25s ease-in-out;
			-moz-transition: all .25s ease-in-out;
			-webkit-transition: all .25s ease-in-out;		
			text-align: center;
			margin-top: 2px;
			padding: 12px 0px;					        
		}

CSS Mobile

Javascript

Quick Search

Quick Search Style 2

Close

HTML

<section class="aios-quick-style-2">
	<div class="container">
		<div class="quick-search-style-2">
			<h2>Quick <strong>Search</strong></h2>
			<form action="#" method="get">
				<select name="Property Type" class="long">
					<option value="Property Type">Property Type</option>
				</select>
				<select name="City or ZIP" class="long">
					<option value="City or ZIP">City or ZIP</option>
				</select>
				<select name="Beds">
					<option value="Beds">Beds</option>
				</select>
				<select name="Baths">
					<option value="Baths">Baths</option>
				</select>
				<select name="Min Price">
					<option value="Min Price">Min Price</option>
				</select>
				<select name="Max Price">
					<option value="Max Price">Max Price</option>
				</select>
				<input type="submit" value="Search">
				<a href="#">Advanced</a>
			</form>
		</div>
	</div>
</section><!-- end of style 2 -->

CSS

	.aios-quick-style-2{
		background: #d7d7d7;
		padding: 22px;
		font-size: 0;
	}
		.aios-quick-style-2 h2{
			font-weight: 300;
			font-size: 19px;
			color: #fff;
			text-transform: uppercase;
			display: inline-block;
			vertical-align: top;
		    width: 16%;
	        padding: 8px 0;

		}
			.aios-quick-style-2 h2 strong{
				font-weight: bold;
			}
		.aios-quick-style-2 form{
			display: inline-block;
			vertical-align: top;
			width: 84%;
			margin-top: 6px;
		}
			.aios-quick-style-2 select{
				height: 34px;
				border: none;
				background: #fff;
				outline: none;
				color: #b7b7b7;
				font-size: 12px;
				cursor: pointer;
			    padding: 6px 10px;
			    display: inline-block;
			    vertical-align: top;
			    margin-left: 0.2%;
			    width: 11%;
				-webkit-appearance: none;
				-moz-appearance:    none;
				appearance:         none;
				background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
				background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
				background-size: 5px 5px, 5px 5px, 1px 1.5em;
				background-repeat: no-repeat;
			    
			}
				.aios-quick-style-2 select.long{
			    	width: 14.2%;
				}
			.aios-quick-style-2 input[type="submit"]{
				height: 34px;
				background-color: #009bbb;
				border: none;
				width: 12.8%;
				font-size: 12px;
				color: #fff;
				outline: none;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
				display: inline-block;
				vertical-align: top;		
				margin-left: 2%;
			}
			.aios-quick-style-2 a{
				display: inline-block;
				vertical-align: top;
				text-decoration: none;
				height: 34px;
				background-color: #b7b7b7;
				border: none;
				width: 11%;
				font-size: 12px;
				color: #fff;
				outline: none;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
				text-align: center;
				padding: 8px 0px;
				margin-left: 0.2%;				        
			}

CSS Mobile

	@media only screen and (max-width: 1199px) {
		.aios-quick-style-2 h2{
			width: 100%;
			text-align: center;
		}
		.aios-quick-style-2 form{
			width: 100%;
		}
	}

	@media only screen and (max-width: 992px) {
		.aios-quick-style-2 select{
			margin-left: 0.5%;
			width: 49.5%;
			margin-bottom: 2px;
		}
		.aios-quick-style-2 select.long{
			width: 99.5%;
		}
		.aios-quick-style-2 input[type="submit"]{
			margin: 0 auto;
			width: 50%;
			display: block;
			margin-top: 20px;
		}
		.aios-quick-style-2 a{
			margin: 0 auto;
			width: 50%;
			display: block;
			margin-top: 2px;			
		}
	}

Javascript

Quick Search

Quick Search Style 3

Close

HTML

<section class="aios-quick-style-3">
	<div class="quick-search-style-3">
		<h2>Quick <strong>Search</strong></h2>
		<form action="#" method="get">
			<div>
				<select name="Property Type" class="long">
					<option value="Property Type">Property Type</option>
				</select>
				<select name="City or ZIP" class="long">
					<option value="City or ZIP">City or ZIP</option>
				</select>	
				<select name="Beds" class="qc-short">
					<option value="Beds">Beds</option>
				</select>
				<select name="Baths">
					<option value="Baths">Baths</option>
				</select>
				<select name="Min Price" class="qc-min">
					<option value="Min Price">Min Price</option>
				</select>
				<select name="Max Price" class="form-reduce">
					<option value="Max Price">Max Price</option>
				</select>
			</div>
			<div class="qc-buttons">
				<input type="submit" value="Search">
				<a href="#">Advanced</a>
			</div>
		</form>
	</div>	
</section><!-- end of style 3 -->

CSS

	.aios-quick-style-3{

	}

		.aios-quick-style-3 .quick-search-style-3{
			width: 100%;
			max-width: 847px;
			margin: 0 auto;
			background: #d7d7d7;
			padding: 30px 30px 20px 30px;		
		}
		.aios-quick-style-3 h2{
			display: inline-block;
			vertical-align: top;
			font-size: 20px;
			font-weight: 300;
			color: #fff;
			letter-spacing: 13.3px;
			text-transform: uppercase;
			width: 15%;
			margin-right: 2%;
			padding: 14px 0;
		}
			.aios-quick-style-3 h2 strong{
				display: block;
				font-size: 30px;
				font-weight: 600;
				letter-spacing: 0;
			}
		.aios-quick-style-3 form{
			display: inline-block;
			vertical-align: top;
			width: 82%;
			font-size: 0;
  			margin-top: 7px;
		}
			.aios-quick-style-3 form div{
				display: inline-block;
				vertical-align: top;
				width: 82%;
				height: auto;
			}
				.aios-quick-style-3 form div select{
					height: 34px;
					border: none;
					background: #fff;
					outline: none;
					color: #b7b7b7;
					font-size: 12px;
					cursor: pointer;
					padding: 6px 10px;
					display: inline-block;
					vertical-align: top;
					margin-left: 2%;
				    width: 23.6%;
					margin-bottom: 10px;	
					-webkit-appearance: none;
					-moz-appearance:    none;
					appearance:         none;
					background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
					background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
					background-size: 5px 5px, 5px 5px, 1px 1.5em;
					background-repeat: no-repeat;
							
				}
					.aios-quick-style-3 form div select.long{
						width: 49.2%;
						margin-left: 1.5%;
					}
						.aios-quick-style-3 form div select:first-child,
						.aios-quick-style-3 form div select.qc-short{
						    margin-left: 0;
						}
					.aios-quick-style-3 form div select.form-reduce{
					    width: 23%;
					}
				.aios-quick-style-3 .qc-buttons{
					display: inline-block;
					vertical-align: top;
					width: 15.5%;
					margin-left: 2%;
				}
				.aios-quick-style-3 input[type="submit"]{
					height: 34px;
					background-color: #009bbb;
					border: none;
					width: 100%;
					font-size: 12px;
					color: #fff;
					outline: none;
					transition: all .25s ease-in-out;
					-moz-transition: all .25s ease-in-out;
					-webkit-transition: all .25s ease-in-out;
					display: block;		
					margin-bottom: 10px;
				}
				.aios-quick-style-3  a{
					display: block;
					text-decoration: none;
					height: 34px;
					background-color: #b7b7b7;
					border: none;
					width: 100%;
					font-size: 12px;
					color: #fff;
					outline: none;
					transition: all .25s ease-in-out;
					-moz-transition: all .25s ease-in-out;
					-webkit-transition: all .25s ease-in-out;
					text-align: center;
					padding: 8px 0px;
				}

CSS Mobile

	@media only screen and (max-width: 992px) {
		.aios-quick-style-3 h2{
			width: 100%;
			text-align: center;
			margin-left: 0;
		}
			.aios-quick-style-3 h2 strong{
			    letter-spacing: 10px;
			}
		.aios-quick-style-3 form{
			width: 100%;
		}
	}

	@media only screen and (max-width: 650px) {
		.aios-quick-style-3 form div{
			width: 100%;
		}
			.aios-quick-style-3 form div select{
				width: 49%;
			}
			.aios-quick-style-3 form div select.form-reduce{
				width: 49%;
			}
			.aios-quick-style-3 form div select.long{
				width: 100%;
				margin-left: 0;
			}
			.aios-quick-style-3 form div select.qc-min{
				margin-left: 0;
			}

		.aios-quick-style-3 .qc-buttons{
			width: 100%;
			margin-left: 0;
		}
	}

Javascript

Quick Search

Quick Search Style 4

Close

HTML

<section class="aios-quick-style-4">
	<div class="quick-search-style-4">
		<div class="qc-pagination">
			<a href="#" class="qc-buyers qc-active">For Buyers</a>
			<a href="#" class="qc-sellers">For Sellers</a>
		</div><!-- end of qc pagination -->
		<div class="qc-fr-wrap">
			<div class="for-buyers">
				<h2>Quick Search</h2>
				<form action="#" method="get">
					<div>
						<select name="Search by Address or MLS#" class="long">
							<option value="Search by Address or MLS#">Search MLS#</option>
						</select>	
						<select name="Beds" class="qc-short">
							<option value="Beds">Beds</option>
						</select>
						<select name="Baths">
							<option value="Baths">Baths</option>
						</select>
						<select name="Min Price" class="qc-min">
							<option value="Min Price">Min Price</option>
						</select>
						<select name="Max Price" class="form-reduce">
							<option value="Max Price">Max Price</option>
						</select>
					</div>
					<div class="qc-buttons">
						<input type="submit" value="Search">
						<a href="#">Advanced</a>
					</div>
				</form>					
			</div><!-- end of for buyers -->
			<div class="for-sellers">
				<h2>Quick Search</h2>
				<form action="#" method="get">
					<div>
						<select name="Search by Address or MLS#" class="long">
							<option value="Search by Address or MLS#">Search by Address or MLS#</option>
						</select>	
						<select name="Beds" class="qc-short">
							<option value="Beds">Beds</option>
						</select>
						<select name="Baths">
							<option value="Baths">Baths</option>
						</select>
						<select name="Min Price" class="qc-min">
							<option value="Min Price">Min Price</option>
						</select>
						<select name="Max Price">
							<option value="Max Price">Max Price</option>
						</select>
					</div>
					<div class="qc-buttons">
						<input type="submit" value="Search">
						<a href="#">Advanced</a>
					</div>
				</form>					
			</div><!-- end of for sellers -->

			
		</div><!-- end qc wrap -->
	</div>	
</section><!-- end of style 4 -->

CSS

	.aios-quick-style-4{
		margin: 0 auto;
		max-width: 750px;
		height: auto;
		min-height: 198px;

	}
		.aios-quick-style-4 .qc-pagination{
			text-align: center;
		}
			.aios-quick-style-4 .qc-pagination a{
				display: inline-block;
				vertical-align: top;
				width: 35%;
				height: 34px;
				font-size: 15px;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
				background: #b7b7b7;
				padding: 9px 0;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
				text-transform: uppercase;

			}
				.aios-quick-style-4 .qc-pagination a:hover,
				.aios-quick-style-4 .qc-pagination a.qc-active{
					background: #009bbb;
				}

		.aios-quick-style-4 .qc-fr-wrap{
			width: 100%;
			height: auto;
			position: relative;
		}

		.aios-quick-style-4 .qc-fr-wrap > div{
			padding: 32px 50px;
			background: #d7d7d7;
		}
			.aios-quick-style-4 .qc-fr-wrap div h2{
				font-weight: bold;
				font-size: 25px;
				color: #fff;
				text-align: center;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				padding-bottom: 30px;
			}
			.aios-quick-style-4 .qc-fr-wrap div form{
				display: block;
				width: 100%;
			}
				.aios-quick-style-4 .qc-fr-wrap div form div{
					display: inline-block;
					vertical-align: top;
				    width: 81.7%;
				}
				.aios-quick-style-4 .qc-fr-wrap div form select{
					height: 34px;
					border: none;
					background: #fff;
					outline: none;
					color: #b7b7b7;
					font-size: 12px;
					cursor: pointer;
					padding: 6px 10px;
					display: inline-block;
					vertical-align: top;
					margin-left: 2%;
			       width: 22.82%;
					margin-bottom: 10px;		
					-webkit-appearance: none;
					-moz-appearance:    none;
					appearance:         none;
					background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
					background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
					background-size: 5px 5px, 5px 5px, 1px 1.5em;
					background-repeat: no-repeat;
							

				}
					.aios-quick-style-4 .qc-fr-wrap div form select.long{
						width: 100%;
						margin-left: 0;
					}
					.aios-quick-style-4 .qc-fr-wrap div form select.qc-short{
						margin-left: 0;
					}
				.aios-quick-style-4 .qc-fr-wrap div form .qc-buttons{
					display: inline-block;
					vertical-align: top;
					width: 15.5%;
					margin-left: 2%;
				}
				.aios-quick-style-4 .qc-buttons input[type="submit"]{
					height: 34px;
					background-color: #009bbb;
					border: none;
					width: 100%;
					font-size: 12px;
					color: #fff;
					outline: none;
					transition: all .25s ease-in-out;
					-moz-transition: all .25s ease-in-out;
					-webkit-transition: all .25s ease-in-out;
					display: block;		
					margin-bottom: 10px;
				}
				.aios-quick-style-4 .qc-buttons  a{
					display: block;
					text-decoration: none;
					height: 34px;
					background-color: #b7b7b7;
					border: none;
					width: 100%;
					font-size: 12px;
					color: #fff;
					outline: none;
					transition: all .25s ease-in-out;
					-moz-transition: all .25s ease-in-out;
					-webkit-transition: all .25s ease-in-out;
					text-align: center;
					padding: 12px 0px;
				}

			.aios-quick-style-4 .qc-fr-wrap .for-sellers{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: none;
			}

CSS Mobile

	@media only screen and (max-width: 992px) {
		.aios-quick-style-4 .qc-fr-wrap > div{
			padding: 32px 17px;
		}
		.aios-quick-style-4 .qc-fr-wrap div form div{
			width: 100%;
		}
			.aios-quick-style-4 .qc-fr-wrap div form select{
				width: 48%;
			}
				.aios-quick-style-4 .qc-fr-wrap div form select.qc-min{
					margin-left: 0;
				}
		.aios-quick-style-4 .qc-fr-wrap div form .qc-buttons{
			width: 100%;
			display: block;
			margin: 0 auto;
		}
	}

Javascript

	jQuery('.qc-sellers').click(function(e){

		e.preventDefault();
		jQuery('.for-sellers').fadeIn();
		jQuery(this).addClass('qc-active');
		jQuery('.qc-buyers').removeClass('qc-active')
	})

	jQuery('.qc-buyers').click(function(e){

		e.preventDefault();
		jQuery('.for-sellers').fadeOut();
		jQuery(this).addClass('qc-active');
		jQuery('.qc-sellers').removeClass('qc-active')
	})

For Buyers For Sellers

Quick Search

Quick Search Style 5

Close

HTML

<section class="aios-quick-style-5">
	<div class="container">
		<div class="quick-search-style-5">
			<form action="#" method="post">
				<div class="qc-wrap">
					<input type="text" placeholder="Neighborhood, City or ZIP code">
					<input type="submit" value="Search">
				</div>
			</form>
		</div>	

	</div>
</section> <!-- end of style 5 -->

CSS

	.aios-quick-style-5{
		width: 100%;
		height: auto;
	}
		.aios-quick-style-5 form{
			display: block;
			width: 100%;
		}

			.aios-quick-style-5 .qc-wrap{
				width: 100%;
				height: 59px;
				border: solid 1px #b7b7b7;		
				position: relative;		
			}
				.aios-quick-style-5 .qc-wrap input[type="text"]{
					width: 100%;
					height: 100%;
					background: transparent;
					border: none;
					outline: none;
					color: #b7b7b7;
					font-size: 15px;
					padding-top: 20px;
					padding-bottom: 16px;
					padding-left: 20px;
					padding-right: 130px;
					box-sizing: border-box;
				}
				.aios-quick-style-5 .qc-wrap input[type="submit"]{
					border: none;
					font-size: 13px;
					color: #fff;
					outline: none;
					width: 114px;
					height: 38px;
					background-color: #009bbb;
					text-transform: uppercase;
					position: absolute;
					right: 9px;
					top: 9px;

				}

CSS Mobile

Javascript

Quick Search Style 6

Close

HTML

<div class="container">
    <div class=" new-qs">
        <form action="#" method="get">
            <div class="title">Search Properties</div>
            <div class="search-by">
                <input name="search" type="text" placeholder="City, Zip, Address, or Location" id="input-text">
                <div id="examples">
                    <ul class="category-result" id="category-result">
                        <li>Examples</li>
                        <li><a href="#">Destin, FL</a></li>
                        <li><a href="#">32541, Destin, FL</a></li>
                        <li><a href="#">Okaloosa County, FL</a></li>
                        <li><a href="#">Yolktown At Willow Bend, Destin, FL</a></li>
                        <li><a href="#">123 Main St., Destin, Fl</a></li>
                    </ul>
                </div>
                <div id="cities">
                    <ul class="category-result" id="category-result">
                        <li>Cities</li>
                        <li><a href="#">(Cities)</a></li>
                    </ul>
                </div>
                <div id="zips">
                    <ul class="category-result" id="category-result">
                        <li>Zips</li>
                        <li><a href="#">(Zips)</a></li>
                    </ul>
                </div>
                <div id="counties">
                    <ul class="category-result" id="category-result">
                        <li>Counties</li>
                        <li><a href="#">(Counties)</a></li>
                    </ul>
                </div>
                <div id="subdivisions">
                    <ul class="category-result" id="category-result">
                        <li>Subdivisions</li>
                        <li><a href="#">(Subdivisions)</a></li>
                    </ul>
                </div>
                <div id="areas">
                    <ul class="category-result" id="category-result">
                        <li>Areas</li>
                        <li><a href="#">(Areas)</a></li>
                    </ul>
                </div>
                <a href="#" class="input-arrow" id="input-arrow"> </a>
                <ul class="category" id="category">
                    <li><a href="#" id="cat-cities">View All Cities</a></li>
                    <li><a href="#" id="cat-zips">View All Zips</a></li>
                    <li><a href="#" id="cat-counties">View All Counties</a></li>
                    <li><a href="#" id="cat-subdivisions">View All Subdivisions</a></li>
                    <li><a href="#" id="cat-areas">View All Areas</a></li>
                </ul>
            </div>
            <select name="Beds">
                <option value="Beds">Bedrooms</option>
            </select>
            <select name="Baths">
                <option value="Baths">Bathrooms</option>
            </select>
            <select name="Min Price">
                <option value="Min Price">Min Price</option>
            </select>
            <select name="Max Price">
                <option value="Max Price">Max Price</option>
            </select>
            <input type="submit" value="Search"> </form>
    </div> <a href="#" class="new-qs-as">Advanced Search</a> </div>

CSS

.new-qs {
    background: rgba(238, 238, 238, .5);
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    justify-content: center;
}

.new-qs .title {
    float: left;
    background: #2795d5;
    padding: 16px;
    border: 0;
    color: #fff;
    width: 15%;
    text-align: center;
}

.new-qs form {
    float: left;
    width: 100%;
    margin: 0;
}

.new-qs form select {
    float: left;
    padding: 15px;
    border: 1px solid #d7d7d7;
    border-left: 0;
    width: 12%;
    background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/02/dropdown-arrow.png) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.new-qs form select:focus,
.new-qs form input:focus {
    outline: none;
}

.new-qs form select:first-child {
    border-left: 1px solid #d7d7d7;
    width: 25%;
}

.new-qs form .search-by {
    width: 25%;
    position: relative;
    float: left;
}

.new-qs form input[type="text"] {
    border: 1px solid #d7d7d7;
    float: left;
    padding: 15px 15px;
    color: #000;
    width: 100%;
}

.new-qs form input[type="submit"] {
    float: left;
    background: #2795d5;
    padding: 16px;
    border: 0;
    color: #fff;
    width: 12%;
}

.new-qs-as {
    background: #2795d5;
    color: #fff;
    text-decoration: none;
    left: 0;
    right: 0;
    margin: 10px auto;
    height: 30px;
    line-height: 30px;
    width: 200px;
    text-align: center;
    display: block;
}

.new-qs form .input-arrow {
    background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/02/dropdown-arrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 9999;
    right: 9px;
    top: 16px;
}

.new-qs form .search-by .category {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    border: 1px solid #d7d7d7;
    position: absolute;
    right: 0;
    top: 51px;
    z-index: 99;
}

.new-qs form .search-by .category li {
    background: #fff;
    width: 100%;
}

.new-qs form .search-by .category li:hover {
    background: #2795d5;
}

.new-qs form .search-by .category li:hover a {
    color: #fff;
}

.new-qs form .search-by .category li a {
    text-decoration: none;
    color: #000;
    padding: 10px;
    display: block;
}

.new-qs form .search-by .category-result {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    border: 1px solid #d7d7d7;
    position: absolute;
    left: 0px;
    top: 51px;
    width: 100%;
    max-height: 242px;
    overflow-y: scroll;
    z-index: 99;
}

.new-qs form .search-by .category-result li {
    background: #fff;
    width: 100%;
}

.new-qs form .search-by .category-result li:first-child,
.new-qs form .search-by .category-result li:first-child:hover {
    background: #ccc;
    color: #fff;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.new-qs form .search-by .category-result li:hover {
    background: #2795d5;
}

.new-qs form .search-by .category-result li:hover a {
    color: #fff;
}

.new-qs form .search-by .category-result li a {
    text-decoration: none;
    color: #000;
    padding: 10px;
    display: block;
}

.show {
    display: block !important;
}

.new-qs form .search-by #cities,
.new-qs form .search-by #zips,
.new-qs form .search-by #counties,
.new-qs form .search-by #subdivisions,
.new-qs form .search-by #areas {
    display: none;
}

CSS Mobile

@media only screen and (max-width: 991px) {
    .new-qs .title {
        width: 100%;
    }
    .new-qs form .search-by {
        width: 100%;
    }
    .new-qs form select {
        width: 100%;
        border-left: 1px solid #d7d7d7;
        border-top: 0;
    }
    .new-qs form input[type="submit"] {
        width: 100%;
    }
}

Javascript

jQuery(document).ready(function () {
            jQuery('.new-qs form .search-by #input-arrow').on("click", function (event) {
                jQuery('.new-qs form .search-by #category').toggle();
                jQuery('.new-qs form .search-by #category-result').hide();
                event.stopPropagation();
            });
            jQuery(document).on("click", function (event) {
                jQuery('.new-qs form .search-by #category').hide();
            });
            jQuery('.new-qs form .search-by #input-text').on("click", function (event) {
                jQuery('.new-qs form .search-by #examples').css('display', 'block');
                jQuery('.new-qs form .search-by #cities').css('display', 'none');
                jQuery('.new-qs form .search-by #zips').css('display', 'none');
                jQuery('.new-qs form .search-by #counties').css('display', 'none');
                jQuery('.new-qs form .search-by #subdivisions').css('display', 'none');
                jQuery('.new-qs form .search-by #areas').css('display', 'none');
                jQuery('.new-qs form .search-by #category-result').toggle();
                jQuery('.new-qs form .search-by #category').hide();
                event.stopPropagation();
            });
            jQuery('.new-qs form .search-by #category #cat-cities').on("click", function (event) {
                jQuery('.new-qs form .search-by #examples').css('display', 'none');
                jQuery('.new-qs form .search-by #cities').css('display', 'block');
                jQuery('.new-qs form .search-by #zips').css('display', 'none');
                jQuery('.new-qs form .search-by #counties').css('display', 'none');
                jQuery('.new-qs form .search-by #subdivisions').css('display', 'none');
                jQuery('.new-qs form .search-by #areas').css('display', 'none');
                jQuery('.new-qs form .search-by #cities #category-result').toggle();
                jQuery('.new-qs form .search-by #category').hide();
                event.stopPropagation();
            });
            jQuery('.new-qs form .search-by #category #cat-zips').on("click", function (event) {
                jQuery('.new-qs form .search-by #examples').css('display', 'none');
                jQuery('.new-qs form .search-by #cities').css('display', 'none');
                jQuery('.new-qs form .search-by #zips').css('display', 'block');
                jQuery('.new-qs form .search-by #counties').css('display', 'none');
                jQuery('.new-qs form .search-by #subdivisions').css('display', 'none');
                jQuery('.new-qs form .search-by #areas').css('display', 'none');
                jQuery('.new-qs form .search-by #zips #category-result').toggle();
                jQuery('.new-qs form .search-by #category').hide();
                event.stopPropagation();
            });
            jQuery('.new-qs form .search-by #category #cat-counties').on("click", function (event) {
                jQuery('.new-qs form .search-by #examples').css('display', 'none');
                jQuery('.new-qs form .search-by #cities').css('display', 'none');
                jQuery('.new-qs form .search-by #zips').css('display', 'none');
                jQuery('.new-qs form .search-by #counties').css('display', 'block');
                jQuery('.new-qs form .search-by #subdivisions').css('display', 'none');
                jQuery('.new-qs form .search-by #areas').css('display', 'none');
                jQuery('.new-qs form .search-by #counties #category-result').toggle();
                jQuery('.new-qs form .search-by #category').hide();
                event.stopPropagation();
            });
            jQuery('.new-qs form .search-by #category #cat-subdivisions').on("click", function (event) {
                jQuery('.new-qs form .search-by #examples').css('display', 'none');
                jQuery('.new-qs form .search-by #cities').css('display', 'none');
                jQuery('.new-qs form .search-by #zips').css('display', 'none');
                jQuery('.new-qs form .search-by #counties').css('display', 'none');
                jQuery('.new-qs form .search-by #subdivisions').css('display', 'block');
                jQuery('.new-qs form .search-by #areas').css('display', 'none');
                jQuery('.new-qs form .search-by #subdivisions #category-result').toggle();
                jQuery('.new-qs form .search-by #category').hide();
                event.stopPropagation();
            });
            jQuery('.new-qs form .search-by #category #cat-areas').on("click", function (event) {
                jQuery('.new-qs form .search-by #examples').css('display', 'none');
                jQuery('.new-qs form .search-by #cities').css('display', 'none');
                jQuery('.new-qs form .search-by #zips').css('display', 'none');
                jQuery('.new-qs form .search-by #counties').css('display', 'none');
                jQuery('.new-qs form .search-by #subdivisions').css('display', 'none');
                jQuery('.new-qs form .search-by #areas').css('display', 'block');
                jQuery('.new-qs form .search-by #areas #category-result').toggle();
                jQuery('.new-qs form .search-by #category').hide();
                event.stopPropagation();
            });
            jQuery(document).on("click", function (event) {
                jQuery('.new-qs form .search-by #category-result').hide();
            });
        });

Advanced Search

Quick Search Style 7

Close

HTML

<div class="qs-container">
<div class="qs-tabs">
  <div class="qs-tabs1 qs-tabs">
      <span class="find active">For Sale</span>
  </div>
  <div class="qs-tabs2 qs-tabs">
      <span class="sell">For Lease</span>
  </div>
</div><!-- end of qs-tabs -->

<div class="find-details qs-details">
  <div class="qs-content">
    <div class="qs-left">
      <span class="qs-name">Quick Search</span>
    </div><!-- end of qs-left -->
    <div class="qs-right">
  	<div class="qs-form">
  		<form action="[blogurl]/homes-for-sale-results" method="GET">
        <label class="hidden-label" for="label-for-prop">Label</label>
        <select id="label-for-prop" class="qs1" name="propertyType">
          <option selected value="">Property Type</option>
			<option value="SFR,CND">House / Condo</option>
			<option value="SFR">House Only</option>
			<option value="CND">Condo Only</option>
			<option value="LL">Lots / Land</option>
			<option value="RI">Multi-Unit Residential</option>
			<option value="RNT">Rental</option>
			<option value="COM">Commercial</option>
        </select>
        <label class="hidden-label" for="label-for-city">Label</label>
        <select id="label-for-city" class="qs2" name="cityId[]">
          <option selected value="">City</option>
				<option value="6198" data-type="cityId[]">Atlanta</option>
				<option value="48691" data-type="cityId[]">Brookhaven</option>
				<option value="6034" data-type="cityId[]">Buckhead</option>
				<option value="6181" data-type="cityId[]">Vinings</option>
        </select>
        <label class="hidden-label" for="label-for-beds">Label</label>
        <select id="label-for-beds" class="qs3" name="bedrooms">
          <option value="0">Beds</option>
		    <option value="0">Any</option>
		    <option value="1">1+</option>
		    <option value="2">2+</option>
		    <option value="3">3+</option>
		    <option value="4">4+</option>
		    <option value="5">5+</option>
        </select>
        <label class="hidden-label" for="label-for-baths">Label</label>
        <select id="label-for-baths" class="qs3" name="bathCount">
          <option value="0">Baths</option>
		    <option value="0">Any</option>
		    <option value="1">1+</option>
		    <option value="2">2+</option>
		    <option value="3">3+</option>
		    <option value="4">4+</option>
		    <option value="5">5+</option>
        </select>
        <label class="hidden-label" for="label-for-min">Label</label>
        <select id="label-for-min" class="qs3" name="minListPrice">
          <option selected value="">Min. Price</option>
			<option value="50000">$50,000</option>
			<option value="75000">$75,000</option>
			<option value="100000">$100,000</option>
			<option value="110000">$110,000</option>
			<option value="120000">$120,000</option>
			<option value="130000">$130,000</option>
			<option value="140000">$140,000</option>
			<option value="150000">$150,000</option>
			<option value="160000">$160,000</option>
			<option value="170000">$170,000</option>
			<option value="180000">$180,000</option>
			<option value="190000">$190,000</option>
			<option value="200000">$200,000</option>
			<option value="225000">$225,000</option>
			<option value="250000">$250,000</option>
			<option value="275000">$275,000</option>
			<option value="300000">$300,000</option>
			<option value="325000">$325,000</option>
			<option value="350000">$350,000</option>
			<option value="375000">$375,000</option>
			<option value="400000">$400,000</option>
			<option value="425000">$425,000</option>
			<option value="450000">$450,000</option>
			<option value="475000">$475,000</option>
			<option value="500000">$500,000</option>
			<option value="525000">$525,000</option>
			<option value="550000">$550,000</option>
			<option value="575000">$575,000</option>
			<option value="600000">$600,000</option>
			<option value="650000">$650,000</option>
			<option value="700000">$700,000</option>
			<option value="750000">$750,000</option>
			<option value="800000">$800,000</option>
			<option value="850000">$850,000</option>
			<option value="900000">$900,000</option>
			<option value="1000000">$1,000,000</option>
        </select>
        <label class="hidden-label" for="label-for-max">Label</label>
        <select id="label-for-max" class="qs3" name="maxListPrice">
          <option selected value="">Max. Price</option>
				<option value="50000">$50,000</option>
				<option value="75000">$75,000</option>
				<option value="100000">$100,000</option>
				<option value="110000">$110,000</option>
				<option value="120000">$120,000</option>
				<option value="130000">$130,000</option>
				<option value="140000">$140,000</option>
				<option value="150000">$150,000</option>
				<option value="160000">$160,000</option>
				<option value="170000">$170,000</option>
				<option value="180000">$180,000</option>
				<option value="190000">$190,000</option>
				<option value="200000">$200,000</option>
				<option value="225000">$225,000</option>
				<option value="250000">$250,000</option>
				<option value="275000">$275,000</option>
				<option value="300000">$300,000</option>
				<option value="325000">$325,000</option>
				<option value="350000">$350,000</option>
				<option value="375000">$375,000</option>
				<option value="400000">$400,000</option>
				<option value="425000">$425,000</option>
				<option value="450000">$450,000</option>
				<option value="475000">$475,000</option>
				<option value="500000">$500,000</option>
				<option value="525000">$525,000</option>
				<option value="550000">$550,000</option>
				<option value="575000">$575,000</option>
				<option value="600000">$600,000</option>
				<option value="650000">$650,000</option>
				<option value="700000">$700,000</option>
				<option value="750000">$750,000</option>
				<option value="800000">$800,000</option>
				<option value="850000">$850,000</option>
				<option value="900000">$900,000</option>
				<option value="1000000">$1,000,000</option>
        </select>
        <label class="hidden-label" for="label-for-search-btn">Label</label>
        <!-- <a id="label-for-search-btn" href="#">Search</a> -->
        <input type="submit" id="label-for-search-btn" value="Search" name="search"/>
        </form>
      </div><!-- end of qs-form -->
    </div><!-- end of qs-right -->
  </div><!-- end of qs-content -->
</div>

<div class="sell-details qs-details">
  <div class="qs-content qs-content2">
    <div class="qs-left">
      <span class="qs-name">Quick Search</span>
    </div><!-- end of qs-left -->
    <div class="qs-right">
		<div class="qs-form">
			<form action="[blogurl]/homes-for-sale-results" method="GET">
	        <label class="hidden-label" for="label-for-prop2">Label</label>
	        <select id="label-for-prop2" class="qs1" name="propertyType">
				<option value="">Property Type</option>
				<option selected value="RNT">Rental</option>
				<option value="SFR,CND">House / Condo</option>
				<option value="SFR">House Only</option>
				<option value="CND">Condo Only</option>
				<option value="LL">Lots / Land</option>
				<option value="RI">Multi-Unit Residential</option>
				<option value="COM">Commercial</option>
	        </select>
	        <label class="hidden-label" for="label-for-city2">Label</label>
	        <select id="label-for-city2" class="qs2" name="cityId[]">
				<option selected value="">City</option>
					<option value="6198" data-type="cityId[]">Atlanta</option>
					<option value="48691" data-type="cityId[]">Brookhaven</option>
					<option value="6034" data-type="cityId[]">Buckhead</option>
					<option value="6181" data-type="cityId[]">Vinings</option>
	        </select>
	        <label class="hidden-label" for="label-for-beds2">Label</label>
	        <select id="label-for-beds2" class="qs3" name="bedrooms">
	          <option value="0">Beds</option>
			    <option value="0">Any</option>
			    <option value="1">1+</option>
			    <option value="2">2+</option>
			    <option value="3">3+</option>
			    <option value="4">4+</option>
			    <option value="5">5+</option>
	        </select>
	        <label class="hidden-label" for="label-for-baths2">Label</label>
	        <select id="label-for-baths2" class="qs3" name="bathCount">
	          <option value="0">Baths</option>
			    <option value="0">Any</option>
			    <option value="1">1+</option>
			    <option value="2">2+</option>
			    <option value="3">3+</option>
			    <option value="4">4+</option>
			    <option value="5">5+</option>
	        </select>
	        <label class="hidden-label" for="label-for-min2">Label</label>
	        <input type="text" id="label-for-min2" class="qs3" name="minListPrice" placeholder="MIN. PRICE" />
	        <label class="hidden-label" for="label-for-max2">Label</label>
	        <input type="text" id="label-for-max2" class="qs3" name="maxListPrice" placeholder="MAX. PRICE" />
				
	        <!-- <label class="hidden-label" for="label-for-search-btn2">Label</label> -->
	        <!-- <a id="label-for-search-btn2" href="[blogurl]/homes-for-sale-search-advanced/">Search</a> -->
	        <input type="submit" id="label-for-search-btn2" aria-label="search-button" value="Submit" name="search"/>
	        </form>
		</div><!-- end of qs-form -->
	</div><!-- end of qs-right -->
	</div><!-- end of qs-content -->
</div>
</div>

CSS

.qs-tabs1 {
	display: inline-block;	
	max-width: 178px;
	background: #bebebe;
	/* background: #9e753d; */
	/* float: left; */
	font-size: 20px;
	margin: -49px .2% 0 0;
	text-transform: uppercase;
	color: #fff;
	width: 100%;
	text-align: center;
	/* padding: 10px 0; */
	cursor: pointer;
	/* transition: all 0.2s ease-in-out; */
	/* -moz-transition: all 0.2s ease-in-out; */
	/* -webkit-transition: all 0.2s ease-in-out; */
}

.qs-tabs2 {
	display: inline-block;
	max-width: 178px;
	background: #fff;
	/* float: left; */
	font-size: 20px;
	margin: -49px 0 0 0;
	text-transform: uppercase;
	color: #fff;
	width: 100%;
	text-align: center;
	/* padding: 10px 0; */
	cursor: pointer;
	/* transition: all 0.2s ease-in-out; */
	/* -moz-transition: all 0.2s ease-in-out; */
	/* -webkit-transition: all 0.2s ease-in-out; */
}

.qs-tabs > span {
    display: block;
    color: #fff;
}

.find.active {
    background: #009BBB;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    color: #fff !important;
}

.sell.active {
  background: #009BBB;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    color: #fff !important;
}

.find {
    background: #bebebe;
    padding: 10px 0;
}

.sell {
    background: #bebebe;
    padding: 10px 0;
}

.qs-content {
	background: #D7D7D7;
	/* background: #9e753d; */
	/* background: rgb(158, 117, 61); */
	padding: 20px 0;
	margin: 0 auto;
	color: #666666;
	font-family: 'Source Sans Pro', sans-serif;
}

.qs-left {
	display: inline-block;
	padding: 0 0 0 2%;
	width: 17.5%;
}

span.qs-name {
	font-size: 20px;
	text-transform: uppercase;
	font-family: 'Source Sans Pro', sans-serif;
	letter-spacing: 1px;
	vertical-align: middle;
	letter-spacing: 3px;
	/* color: #fff; */
	color: #6f6f6f;
}

.qs-right {
	display: inline-block;
	margin: 0 0 0 0%;
}

.qs-content {
	color: #666666;
	font-family: 'Source Sans Pro', sans-serif;
}

.qs-form select.qs1 {
    width: 185px;
}

.qs-form select.qs2 {
    width: 160px;
}

.qs-form select.qs3 {
    width: 101px;
}

.qs-form select {
    color: #666666;
    border: 1px solid #cccccc;
    width: 100%;
    font-size: 12px;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    background: url("https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/02/arrow-down.png") no-repeat 89% 17px #fff;
    text-transform: uppercase;
    padding: 11px 17px;
    display: inline-block;
    font-weight: 400;
    vertical-align: middle;
    margin: 0 5px 0 0;
}

.qs-form select {
    color: #666666;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
}

.qs-form select option {
    color: #000;
}

.hidden-label {
	display: none;
}

.qs-form a, .qs-form input[type="submit"] {
	color: #fff;
	background: #009BBB;
	/* max-width: 116px; */
	max-width: 102px;
	width: 100%;
	text-align: center;
	padding: 10.3px 26px 10.2px 26px;
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	vertical-align: middle;
	font-weight: 700;
	margin: 0 0 0 19px;
	letter-spacing: 1px;
	border: none;
}

.qs-form input[type="text"] {
	color: #666666;
	border: 1px solid #cccccc;
	width: 100%;
	max-width: 101px;
	font-size: 12px;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	text-transform: uppercase;
	padding: 11px 17px;
	display: inline-block;
	font-weight: 400;
	vertical-align: middle;
	margin: 0 5px 0 0;
}

.qs-content2 {
	background: #fff;
}

.qs-container {
    max-width: 1140px;
    margin: 0 auto;
}

CSS Mobile

@media only screen and (max-width:991px) {
.qs-content {
    text-align: center;
padding: 20px;
}
#main-qs {
	position: relative;
	max-width: 320px;
	margin: 30px auto -20px auto;
	padding: 27px 0 20px 0;
	bottom: 0;
	background: #009ABA;
}

.qs-tabs1, .qs-tabs2 {
    max-width: 98px;
    font-size: 12px;
}

.qs-tabs {
    text-align: center;
}

.qs-left {
    display: inline-block;
    padding: 0 0 10px 0;
    width: 100%;
}

span.qs-name {
    text-align: center;
    display: block;
}

span.qs-name {
    font-size: 17px;
}

.qs-form select {
    background: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/02/arrow-down.png) no-repeat 95% 15px #fff;
    width: 100% !important;
}

.qs-form select {
    margin: 0 1px 0 0;
    padding: 11px 7px;
}

select.qs1, select.qs2 {
    width: 151px;
}
}

Javascript

jQuery(document).ready(function(){
	jQuery('.find-details').show();

	jQuery('.sell-details').hide();

	jQuery(".sell").click(function(){
		jQuery('.find').removeClass('active');
		jQuery(".sell").addClass('active')
		jQuery(".sell-details").show();
		jQuery('.find-details').hide();
	});

	jQuery(".find").click(function(){
		jQuery('.find').addClass('active');
		jQuery(".sell").removeClass('active')
		jQuery(".sell-details").hide();
		jQuery('.find-details').show();
	});
});

For Sale

For Lease

Quick Search

Label Label Label Label Label Label Label

Quick Search

Quick Search Style 8

Close

HTML

<section class="aios-quick-style-9">
	<div class="container">
		<div class="quick-search-style-2">
			<h2>Quick <strong>Search</strong></h2>
			<form action="#" method="get">
				<select name="Property Type" class="long">
					<option value="Property Type">Property Type</option>
				</select>
				<input type="text" placeholder="City or ZIP" class="long">
				<select name="Beds">
					<option value="Beds">Beds</option>
				</select>
				<select name="Baths">
					<option value="Baths">Baths</option>
				</select>
				<input type="text" placeholder="Min Price">
				<input type="text" placeholder="Max Price">
				<input type="submit" value="Search">
			</form>
		</div>
	</div>
</section><!-- end of style 9 -->

CSS

	.aios-quick-style-9{
		background: #d7d7d7;
		padding: 22px;
		font-size: 0;
	}
		.aios-quick-style-9 h2{
			font-weight: 300;
			font-size: 19px;
			color: #fff;
			text-transform: uppercase;
			display: inline-block;
			vertical-align: top;
		    width: 16%;
	        padding: 8px 0;

		}
			.aios-quick-style-9 h2 strong{
				font-weight: bold;
			}
		.aios-quick-style-9 form{
			display: inline-block;
			vertical-align: top;
			width: 84%;
			margin-top: 6px;
		}
			.aios-quick-style-9 select {
				height: 34px;
				border: none;
				background: #fff;
				outline: none;
				color: #b7b7b7;
				font-size: 12px;
				cursor: pointer;
			    padding: 6px 10px;
			    display: inline-block;
			    vertical-align: top;
			    margin-left: 0.2%;
			    width: 12.57%;
				-webkit-appearance: none;
				-moz-appearance:    none;
				appearance:         none;
				background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
				background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
				background-size: 5px 5px, 5px 5px, 1px 1.5em;
				background-repeat: no-repeat;
			    
			}
				.aios-quick-style-9 input[type="text"] {
					height: 34px;
					border: none;
					background: #fff;
					outline: none;
					color: #b7b7b7;
					font-size: 12px;
					cursor: pointer;
					padding: 6px 10px;
					display: inline-block;
					vertical-align: top;
					margin-left: 0.2%;
					width: 12.57%;
					-webkit-appearance: none;
					-moz-appearance:    none;
					appearance:         none;
				}
				.aios-quick-style-9 select.long,
				.aios-quick-style-9 input.long{
			    	width: 15.77%;
				}
			.aios-quick-style-9 input[type="submit"]{
				height: 34px;
				background-color: #009bbb;
				border: none;
				width: 12.8%;
				font-size: 12px;
				color: #fff;
				outline: none;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
				display: inline-block;
				vertical-align: top;		
				margin-left: 2%;
			}

CSS Mobile

	@media only screen and (max-width: 1199px) {
		.aios-quick-style-9 h2{
			width: 100%;
			text-align: center;
		}
		.aios-quick-style-9 form{
			width: 100%;
		}
	}

	@media only screen and (max-width: 992px) {
		.aios-quick-style-9 select,
		.aios-quick-style-9 input[type="text"]{
			margin-left: 0.5%;
			width: 49.5%;
			margin-bottom: 2px;
		}
		.aios-quick-style-9 select.long,
		.aios-quick-style-9 input.long{
			width: 99.5%;
		}
		.aios-quick-style-9 input[type="submit"]{
			margin: 0 auto;
			width: 50%;
			display: block;
			margin-top: 20px;
		}
	}

Javascript

Quick Search

Quick Search Style 9

Close

HTML

<div id="quick-search" class="clearfix quick-search-style-10">
    <form action="" id="qs-form" method="get">
    <div class="maininput-wrapper">
    	<label for="maininput" class="sr-only">Search By City</label>
    	<input type="text" placeholder="Search by City, Zip Code or MLS#" class="textinput ui-autocomplete-input" id="maininput" autocomplete="off">
    	<div class="btn-maininput"><span class="ai-magnifying-glass-g"></span></div>
    </div>
    <div class="second-maininput-wrapper">
        <input type="hidden" id="catval">
     <label for="minListPrice" class="sr-only">Min Price</label>
     <select id="minListPrice" name="minListPrice" style="display: none;">
            <option value="">Min.</option>
        </select><div tabindex="0" class="easy-select-box  easy-select-0"><div class="esb-displayer">Min.</div><div class="esb-dropdown" style="width: 89px;"><div class="esb-item">Min.</div><div class="esb-item">$100,000</div></div></div>
        <label for="maxListPrice" class="sr-only">Max Price</label>
        <select id="maxListPrice" name="maxListPrice" style="display: none;">
            <option value="">Max.</option>
        </select><div tabindex="0" class="easy-select-box  easy-select-1"><div class="esb-displayer">Max.</div><div class="esb-dropdown" style="width: 89px;"><div class="esb-item">Max.</div><div class="esb-item">$100,000</div></div></div>
        <label for="bedrooms" class="sr-only">Bedrooms</label>
        <select id="bedrooms" name="bedrooms" style="display: none;">
            <option value="0">Beds</option>          
        </select><div tabindex="0" class="easy-select-box  easy-select-2"><div class="esb-displayer">Beds</div><div class="esb-dropdown" style="width: 89px;"><div class="esb-item">Beds</div><div class="esb-item">1</div></div></div>
        <label for="bathCount" class="sr-only">BathCount</label>
        <select id="bathCount" name="bathCount" style="display: none;">
            <option value="0">Baths</option>           
        </select><div tabindex="0" class="easy-select-box  easy-select-3"><div class="esb-displayer">Baths</div><div class="esb-dropdown" style="width: 89px;"><div class="esb-item">Baths</div><div class="esb-item">1</div></div></div>
        <input type="submit" value="Search" class="btn-submit">
    </div>
    </form>
</div>

CSS

.easy-select-box .esb-dropdown .esb-item:hover {
    background: #3399ff;
    color: #FFFFFF;
    text-decoration: none;
}
.easy-select-box .esb-dropdown .esb-item {
    padding: 3px;
    background: #FFFFFF;
    color: #0c2245;
    cursor: default;
}

.easy-select-box .esb-dropdown {
    border: 1px solid #cccccc;
    max-height: 200px;
    overflow: auto;
    background: #FFFFFF;
    font-size: 12px;
    display: none;
    position: absolute;
    width: 100% !important;
    z-index: 9;
}

.easy-select-box .esb-displayer {
    background-size: auto auto;
    height: 53px;
    line-height: 53px;
    background-size: 100% 100%;
    background-color: #eeeeee;
    padding: 0 10px;
    color: #000000;
}
#quick-search {
    width: 100%;
    position: relative;
    z-index: 20;
    padding-top: 28px;
    margin: auto;
    max-width: 1132px;
}

.clearfix, .container, ul.ui-tabs-panel {
    display: block;
}
form {
    display: block;
    margin-top: 0em;
}

.maininput-wrapper {
    max-width: 604px;
    width: 50%;
    float: left;
    margin-right: 7px;
    font-size: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(221, 221, 221);
    border-image: initial;
    padding: 0px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0px, 0px, 0px, 0px);
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
}

#quick-search .textinput {
    max-width: 541px;
    width: 90%;
    color: rgb(184, 184, 184);
    font-size: 20px;
    font-weight: 300;
    font-family: Lato, sans-serif;
    float: none;
    margin-right: 0px;
    letter-spacing: 6px;
    display: inline-block;
    vertical-align: middle;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(34, 168, 199);
    border-image: initial;
    padding: 13px 11px;
    outline: 0px;
}

.btn-maininput {
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    max-width: 63px;
    width: 10%;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    outline: 0px;
    background-color: #dddddd;
    cursor: pointer;
    position: relative;
}

.easy-select-box {
    width: 19%;
   /* min-width: 90px;*/
    text-align: left;
    font-size: 20px;
    color: rgb(255, 255, 255);
    font-family: Lato, sans-serif;
    font-weight: 300;
    float: left;
    cursor: pointer;
    outline-color: transparent !important;
    border: 1px solid #ffffff;
    position: relative;
 }

#quick-search .btn-submit {
    width: 22%;
    height: 53px;
    float: right;
    font-size: 20px;
    color: rgb(255, 255, 255);
    font-family: Lato, sans-serif;
    font-weight: 300;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    background-color: #dddddd;
    cursor: pointer;
}

.clearfix::after {
    visibility: hidden;
    display: block;
    font-size: 0px;
    content: ".";
    clear: both;
    height: 0px;
}

.easy-select-box .esb-displayer:active, .easy-select-box .esb-displayer:focus{
    outline: none;
    outline-color: transparent;
}
.second-maininput-wrapper{
    width: 49%;
    float: right;
}

.btn-maininput span{
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS Mobile

@media only screen and (max-width: 991px){
    .maininput-wrapper{
        width: 100%;
        float: none;
        margin: 0 auto;
    }

    .second-maininput-wrapper {
        width: 100%;
        overflow: auto;
        float: none;
        max-width: 604px;
        margin: 10px auto;
    }
    
}
@media only screen and (max-width: 643px){
    .easy-select-box{
        width: 50%;
    }
    #quick-search .btn-submit{
        width: 100%;
    }

    #quick-search{
        width: 90%;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 550px){
    .btn-maininput span{
        font-size: 25px;
    }
}

Javascript

    jQuery(document).ready(function(){
        jQuery(".easy-select-box").each(function(){
            jQuery(this).click(function(){
                jQuery(this).find(".esb-dropdown").slideToggle();
            });


            jQuery(this).find(".esb-item").each(function(){
                jQuery(this).click(function(){
                    jQuery(this).parent().parent().find(".esb-displayer").text(jQuery(this).text());
                })
            });
        });


    });

Quick Search Style 10

Close

HTML

<section class="aios-quick-style-11">
	<div class="container">
		<div class="quick-search-style-11">
			<div class="qs-icon-wrapper">
				<span class="ai-font-magnifying-glass-b qs-icon"></span>
			</div>
			<div class="qs-form">
				<form action="#" method="get">
					<input type="hidden" name="boardId">
					<div class="long-form qs-field">
						<label for="maininput" class="label-hide">Search by City, Zip Code or MLS #</label>
						<input type="text" id="maininput" placeholder="Search by City" title="search-city" class="ui-autocomplete-input" autocomplete="off">
						<input type="hidden" name="cityId[]" id="citys" value="22412">
					</div>
					<div class="short-form qs-field field-right">
						<label class="label-hide" for="qsmaxListPrice">Max Price</label>
						<input type="text" id="qsmaxListPrice" name="maxListPrice" placeholder="Max. Price">
					</div>
					<div class="short-form qs-field field-left">
						<label class="label-hide" for="qsbedrooms">Beds</label>
						<select id="qsbedrooms" name="bedrooms">
							<option value="">Beds</option>
							<option value="0" style="">Any</option>
						   <option value="1" style="">1+</option>
						   <option value="2" style="">2+</option>
						   <option value="3" style="">3+</option>
						   <option value="4" style="">4+</option>
						   <option value="5" style="">5+</option>
						</select>
					</div>
					<div class="short-form qs-field field-right">
						<label class="label-hide" for="qsbath">Baths</label>
						<select id="qsbath" name="bathCount">
							<option value="">Baths</option>
							<option value="0" style="">Any</option>
						   <option value="1" style="">1+</option>
						   <option value="2" style="">2+</option>
						   <option value="3" style="">3+</option>
						   <option value="4" style="">4+</option>
						   <option value="5" style="">5+</option>
						</select>
					</div>
					<div class="btn-form qs-field qsbtn1 ">
						<input type="submit" id="qssubmit" class="btn-qs" value="Search">
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

CSS

.aios-quick-style-11 {
    position: relative;
    width: 100%;
    padding: 31px 0;
    bottom: 0;
    font-size: 0;
    border-top: 1px solid #7c7b79;
    background: rgba(32, 32, 32,.5);
}
    .aios-quick-style-11 .qs-icon-wrapper {
        width: 2.631%;
        display: inline-block;
        vertical-align: top;
    }
        .qs-icon-wrapper .qs-icon {
            font-size: 30px;
            color: #fff;
        }
    .aios-quick-style-11 .qs-form {
        width: 97.368%;
        display: inline-block;
        vertical-align: top;
        padding-left: 20px;
    }
        .aios-quick-style-11 .qs-form .label-hide {
            display: none;
        }
        .aios-quick-style-11 .qs-form .long-form {
            width: 41.729%;
            display: inline-block;
            padding: 0 3px;
        }
        .aios-quick-style-11 .qs-form .short-form, .aios-quick-style-11 .qs-form .btn-form {
            width: 14.504%;
            display: inline-block;
            padding: 0 3px;
        }
        .aios-quick-style-11 .qs-form .btn-form{
            vertical-align: bottom;
        }
        .aios-quick-style-11 .qs-form select, .aios-quick-style-11  .qs-form input{
            width: 100%;
            height: 33px;
            color: #fff;
            font-size: 11px;
            background: transparent;
            border: 1px solid #bdbdbb;
            margin: 0;
    font-weight: normal;
    padding: 0 0 0 10px;
    text-transform: none;
    max-width: 100%;
        }
        .aios-quick-style-11 .qs-form select:focus, .aios-quick-style-11 .qs-form input:focus{
            outline: none;
            border-color: #a90e0e;
        }
        .aios-quick-style-11 .qs-form option {
            color: #000;
        }
        .aios-quick-style-11 .qs-form .btn-qs{
            padding: 0;
            background: #fff;
            color: #202020;
            font-size: 13px;
            font-weight: bold;
            text-transform: uppercase;
            border: none;
        }

        .aios-quick-style-11 .qs-form .btn-qs:hover {
            background: #484848;
            color: #fff;
        }

CSS Mobile

@media only screen and (max-width: 991px) {
		.aios-quick-style-11 .quick-search-style-11 .qs-icon-wrapper {
		    display: none !important;
		}
		.aios-quick-style-11 .quick-search-style-11 .qs-form{
			width: 100%;
			padding-left: 0;
		}
		.aios-quick-style-11 .qs-form .long-form, .aios-quick-style-11 .qs-form .short-form, .aios-quick-style-11 .qs-form .btn-form{
		    width: 100%;
		    display: block;
		    padding-bottom: 5px;
		}
}