Html Code: Auto Hiding Search Box

Sometimes you need to be more creative and makes your websites elements dynamic. For example, by using the following search box, you save the space and show the box only when it is necessary and clicked. Otherwise, it would collapse and hide.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box {
  border: solid 5px black;
  display: inline-block;
  position: relative;
  border-radius: 50px;
}
.search-box input[type="text"] {
  font-family: Raleway, sans-serif;
  font-size: 20px;
  font-weight: bold;
  width: 50px;
  height: 50px;
  padding: 5px 40px 5px 10px;
  border: none;
  box-sizing: border-box;
  border-radius: 50px;
  transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 0.5) 600ms;
}
.search-box input[type="text"]:focus {
  outline: none;
}
.search-box input[type="text"]:focus, .search-box input[type="text"]:not(:placeholder-shown) {
  width: 300px;
  transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.search-box input[type="text"]:focus + span, .search-box input[type="text"]:not(:placeholder-shown) + span {
  bottom: 13px;
  right: 10px;
  transition: bottom 300ms ease-out 800ms, right 300ms ease-out 800ms;
}
.search-box input[type="text"]:focus + span:after, .search-box input[type="text"]:not(:placeholder-shown) + span:after {
  top: 0;
  right: 10px;
  opacity: 1;
  transition: top 300ms ease-out 1100ms, right 300ms ease-out 1100ms, opacity 300ms ease 1100ms;
}
.search-box span {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -13px;
  right: -15px;
  transition: bottom 300ms ease-out 300ms, right 300ms ease-out 300ms;
}
.search-box span:before, .search-box span:after {
  content: '';
  height: 25px;
  border-left: solid 5px black;
  position: absolute;
  transform: rotate(-45deg);
}
.search-box span:after {
  transform: rotate(45deg);
  opacity: 0;
  top: -20px;
  right: -10px;
  transition: top 300ms ease-out, right 300ms ease-out, opacity 300ms ease-out;
}
</style>
<div class="search-box">
<input type="text" placeholder=" " /><span></span>
</div>
<script>
'use strict';
var searchBox = document.querySelectorAll('.search-box input[type="text"] + span');

searchBox.forEach(elm => {
  elm.addEventListener('click', () => {
    elm.previousElementSibling.value = '';
  });
});
</script><a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Html Best Codes

Html Code: Auto Hiding Search Box

Links