PROWARE technologies
PROWARE technologies

Working, Expanding Search Bar/Box Using Only HTML/CSS

This is a working search box that expands when in use. It requires only HTML and CSS — no JavaScript. The end-user can click the search button to expand the search box or simply hover over it.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	<title>SEARCH BOX</title>
	<style>
	body {
		padding: 0;
		margin: 0;
		font-family: sans-serif;
	}
	header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 10px;
		background-color: purple;
	}
	header h1 {
		color: dodgerblue;
	}
	main {
		padding: 10px;
	}
	.search-box {
		display: inline-flex;
		padding: 2px;
		border: 2px solid magenta;
		outline: none;
		border-radius: 30px;
	}
	.search-box:focus-within { /* IE11 WILL IGNORE BECAUSE IT IS NOT SUPPORTED */
		border-color: dodgerblue;
	}
	.search-box input {
		outline: none;
		border: none;
		width: 0;
		background-color: transparent;
		color: gray;
		font-size: 16px;
		line-height: 30px;
		padding: 0;
		transition: width .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	}
	.search-box:hover input,
	.search-box input:focus,
	.search-box input:valid {
		margin-left: 5px;
		width: 265px;
	}
	.search-box button {
		outline: none;
		border: none;
		cursor: pointer;
		background-color: magenta;
		padding: 8px 8px 7px 7px;
		border-radius: 50%;
	}
	.search-box:focus-within button { /* can't combine selectors because IE11 will whine */
		background-color: red;
	}
	.search-box input:focus + button {
		background-color: red;
	}
	.search-box input:valid + button {
		background-color: limegreen;
	}
	</style>
</head>
<body>
	<header>
		<h1>Acme, Inc.</h1>
		<div>
			<form action="https://www.bing.com/search" class="search-box">
				<input type="text" name="q" autocomplete="off" autocapitalize="off" placeholder="enter search" required />
				<button type="submit"><i class="fas fa-search"></i></button>
			</form>
		</div>
	</header>
	<main>
		<h1>About Us</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, tempora? Obcaecati quas, id quibusdam, placeat aliquam consectetur error ducimus corporis laudantium odio voluptatem ratione ex nesciunt vitae temporibus? A eaque debitis quia blanditiis libero velit ea facere doloremque! Odio eaque, aut sapiente nobis nam velit fugiat laborum maiores adipisci illum, quisquam, atque voluptatum pariatur beatae placeat necessitatibus! Alias obcaecati facilis, perspiciatis accusantium, blanditiis iure expedita, dignissimos ab amet fugiat quae officiis. Earum inventore quod reiciendis numquam provident totam saepe molestias ex, eaque et sit, cupiditate reprehenderit corrupti nesciunt? Magnam deserunt eaque optio adipisci tempore reprehenderit harum unde fugiat voluptate totam.</p>
	</main>
</body>
</html>

Coding Video

https://youtu.be/gXy0a9Z6pI4