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