<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="search"> <div class="icon"></div> <div class="input"> <input type="text" id="mysearch" placeholder="search here"> </div> <span class="clear" onclick="document.getElementById('mysearch').value = '' "></span> </div>

.search{ width: 60px; height: 60px; position: relative; background: #fff; border-radius: 60px; transition: 0.5s; box-shadow: 0 0 0 5px #297eff; overflow: hidden; } .search.active{ width: 360px; } .search .icon{ top: 0; left: 0; position: absolute; width: 60px; height: 60px; background: #fff; border-radius: 60px; display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; } .search .icon::before{ content: ''; position: absolute; width: 15px; height: 15px; border: 3px solid #287eff; border-radius: 50%; transform: translate(-4px,-4px); } .search .icon::after{ content: ''; position: absolute; width: 3px; height: 12px; background: #287eff; transform: translate(6px,6px) rotate(315deg); } .search .input{ position: relative; width: 300px; height: 60px; left: 60px; display: flex; justify-content: center; align-items: center; } .search .input input{ position: absolute; top: 0; width: 100%; height: 100%; border: none; outline: none; font-size: 18px; padding: 10px 0; display: flex; justify-content: center; align-items: center; } .search .clear{ position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: rgb(231, 251, 116); right: 15px; display: flex; justify-content: center; align-items: center; } .clear::before{ content: ''; position: absolute; width: 1px; height: 15px; background: #999; transform: rotate(45deg); } .clear::after{ content: ''; position: absolute; width: 1px; height: 15px; background: #999; transform: rotate(315deg); }

const icon = document.querySelector('.icon'); const search = document.querySelector('.search'); icon.onclick = function(){ search.classList.toggle('active') }