html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输入框隐藏</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="crossorigin="anonymous"><link rel="stylesheet" href="./index.css">
</head><body><div class="search_wrapper"><input id="search_input" type="text" placeholder="请输入搜索内容" class="search_input "></input><button id="search_btn" class="search_btn "><i class="fas fa-search"></i></button></div><script src="./index.js"></script>
</body></html>css">body {display: flex;align-items: center;justify-content: center;background-color: pink;height: 100vh;
}.search_wrapper {display: flex;align-items: center;position: relative;.search_input {width: 50px;height: 50px;border: 0;padding: 0 16px;box-sizing: border-box;transition: .3s all ease;outline: 0;}.search_btn {width: 50px;height: 50px;position: absolute;left: 0;top: 0;border: 0;font-size: 24px;cursor: pointer;background-color: #fff;transition: .3s all ease;}.search_input_active {width: 200px;}.search_btn_active {transform: translateX(198px);}
}js
const state = {searchInputEl: document.querySelector('.search_input'),searchBtnEl: document.querySelector('.search_btn')
}state.searchBtnEl.onclick = function () {state.searchInputEl.classList.toggle('search_input_active')state.searchInputEl.focus()state.searchBtnEl.classList.toggle('search_btn_active')
}
