Search input

In this example below you will see how to do a Search input with some HTML / CSS and Javascript

Inspiration: https://dribbble.com/shots/1945376-Search?list=following&offset=6

Thumbnail
This awesome code was written by wontem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wontem ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Search input</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="search">
  <input type="search" autocomplete="off" required/>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 1000 150">
    <path class="path" fill="none" d="M924.4 85.2c-19.5 19.5-50.8 19.7-70.3 0-19.3-19.4-19.3-51 .3-70.6 19.5-19.5 51-19.4 70.6 0 19.3 19.7 19.3 50.8-.5 70.6l35.4 35.3H0"/>
  </svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/wontem/search-input-XJLPyN */
html, body {
  background: #1a805a;
}

.search {
  position: absolute;
  width: 300px;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
}
.search svg {
  width: 300px;
  -webkit-transform: translate3d(-125px, 0, 0);
          transform: translate3d(-125px, 0, 0);
  transition: 0.5s;
  pointer-events: none;
}
.search input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5rem;
  padding: 10px 55px 10px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.search input::-moz-selection {
  background: rgba(0, 0, 0, 0.3);
}
.search input::selection {
  background: rgba(0, 0, 0, 0.3);
}
.search input:valid, .search input:focus {
  cursor: auto;
}
.search input:valid + svg, .search input:focus + svg {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.search input:focus {
  cursor: auto;
  outline: none;
}
.search input:focus + svg .path {
  stroke-dasharray: 961, 363;
  stroke-dashoffset: -363;
}
.search .path {
  stroke-dasharray: 363, 961;
  stroke-dashoffset: 0;
  stroke: #fff;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: 0.5s;
}

Comments