Extended Search Box is an easy-to-use click-to-expand search box written in pure CSS.
expanding search bar, onclick search box open, stylish search box in html css code, animated search bar, onclick search box expand right to left
How to make use of it:
1. Add a search field along with a search button to the search box.
<div class="search-box"> <input type="text" class="search-input" placeholder="Start Looking For Something!"> <a class="search-btn" href="#"> <!-- Seach Icon --> <i class="fas fa-search"></i> </a> </div>
2. Enable the search button to toggle the search box.
/* div */ .search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #cd595a; height: 40px; border-radius: 50px; padding: 10px; } /* input */ .search-input { outline: none; border: none; background: none; width: 0; padding: 0; color: #fff; float: left; font-size: 16px; transition: .3s; line-height: 40px; } .search-input::placeholder { color: #dbc5b0; } /* icon */ .search-btn { color: #fff; float: right; width: 40px; height: 40px; border-radius: 50px; background: #cd595a; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: .3s; } .search-input:focus, .search-input:not(:placeholder-shown) { width: 240px; padding: 0 6px; } .search-box:hover > .search-input { width: 240px; padding: 0 6px; } .search-box:hover > .search-btn, .search-input:focus + .search-btn, .search-input:not(:placeholder-shown) + .search-btn { background: #fff; color: #cd595a; }
Pure CSS Expanding Search Box, Extended Search Box Plugin/Github
See Demo And Download
Official Website(fatihhidiroglu): Click Here
This superior jQuery/javascript plugin is developed by fatihhidiroglu. For extra Advanced usage, please go to the official website.