Day 5 | Demo Search Box

Sử dụng HTML , CSS, JS thiết kế chức năng Search Box đơn giản nhưng siêu sịn sò  

				
						<body>
		<div class="search-box">
			<input type="text" class="search-input" />
			<button class="search-btn">
				<i class="fas fa-search"></i>
			</button>
		</div>

		<script src="app.js"></script>
	</body>
				
			
				
					* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to right, #4daf54, #3d8880);
}

.search-box {
	width: 70px;
	height: 70px;
	background-color: #242628;
	position: relative;
	overflow: hidden;
	transition: all 0.5s ease;
	border-radius: 15px;
}

.search-box.open {
	width: 420px;
}

.search-input {
	width: 100%;
	height: 100%;
	border: none;
	box-shadow: none;
	background: transparent;
	color: #fff;
	padding: 20px 100px 20px 35px;
	font-size: 40px;
}

.search-btn {
	color: #242628;
	outline: none;
	border: none;
	width: 70px;
	height: 70px;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	font-size: 30px;
}

				
			
				
					document.querySelector('.search-btn').addEventListener('click', function () {
	this.parentElement.classList.toggle('open')
	this.previousElementSibling.focus()
})

				
			
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :

HTML : HTML căn bản cho người mới bắt đầu

CSS : CSS căn bản cho người mới bắt đầu

JS: Javascript cho người mới bắt đầu 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *