articles » current » css » expanding-search-bar

CSS: Expanding Search Bar

HTML and CSS only!

This is a working search box that expands when in use. It requires only HTML and CSS — no JavaScript. The end-user can tap 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">
	<title>EXPANDING SEARCH BAR/BOX/FIELD</title>
	<style>
	body {
		padding: 0;
		margin: 0;
		font-family: sans-serif;
		background-color: white;
	}
	.search-icon::before {
		content: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTUuNTU4IDUxNS41NTgiIHZpZXdCb3g9IjAgMCA1MTUuNTU4IDUxNS41NTgiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTM3OC4zNDQgMzMyLjc4YzI1LjM3LTM0LjY0NSA0MC41NDUtNzcuMiA0MC41NDUtMTIzLjMzMyAwLTExNS40ODQtOTMuOTYxLTIwOS40NDUtMjA5LjQ0NS0yMDkuNDQ1cy0yMDkuNDQ0IDkzLjk2MS0yMDkuNDQ0IDIwOS40NDUgOTMuOTYxIDIwOS40NDUgMjA5LjQ0NSAyMDkuNDQ1YzQ2LjEzMyAwIDg4LjY5Mi0xNS4xNzcgMTIzLjMzNy00MC41NDdsMTM3LjIxMiAxMzcuMjEyIDQ1LjU2NC00NS41NjRjMC0uMDAxLTEzNy4yMTQtMTM3LjIxMy0xMzcuMjE0LTEzNy4yMTN6bS0xNjguODk5IDIxLjY2N2MtNzkuOTU4IDAtMTQ1LTY1LjA0Mi0xNDUtMTQ1czY1LjA0Mi0xNDUgMTQ1LTE0NSAxNDUgNjUuMDQyIDE0NSAxNDUtNjUuMDQzIDE0NS0xNDUgMTQ1eiIvPjwvc3ZnPg==);
		width: 100%;
		height: auto;
	}
	main {
		display: flex;
		height: 100vh;
		justify-content: center;
		align-items: center;
	}
	.search-box {
		display: inline-flex;
		padding: 2px;
		border: 2px solid slategray;
		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: black;
		font-size: 16px;
		padding: 0;
		transition: width .4s cubic-bezier(0.18, 0.89, 0.32, 1.33);
	}
	.search-box input::placeholder {
		color: lightgray;
	}
	.search-box:hover input,
	.search-box input:focus,
	.search-box input:valid {
		margin-left: 5px;
		width: 250px;
	}
	.search-box button {
		outline: none;
		border: none;
		cursor: pointer;
		background-color: slategray;
		padding: 8px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		-webkit-appearance: none;
	}
	.search-box:focus-within button { /* can't combine selectors here 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>
	<main>
		<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="search-icon"></i></button>
			</form>
		</div>
	</main>
</body>
</html>

Coding Video

https://youtu.be/jDoe3lGNVNU


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE