September 23, 2022

Onclick Stylish Expanding Search Box in HTML CSS Code

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.

Share

You may also like...

Leave a Reply

Your email address will not be published.