<form class="form">
	<input type="search" class="search" placeholder="Search" list="data">
	<datalist id="data">
		<option value="CSS" />
		<option value="HTMl" />
		<option value="JavaScript" />
		<option value="SCSS" />
		<option value="SASS" />
		<option value="TypeScript" />
		<option value="Vue.js" />
	</datalist>
</form>

.doc {
	background-color: #222;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search {
	background: transparent;
	border: 1px solid #888;
	padding: 0.5rem;
	border-radius: 3px;
	color: white;
	outline: none;
	
	&,
	&::placeholder {
		transition: all 0.3s;
	}
	
	&:focus,
	&:hover {
		border-color: red;
	}
	
	&:focus-within {
		&::placeholder {
			opacity: 0;
		}
	}
}