<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', <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> () {
<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.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
5 Responses