1 
2<form>
3  <label for="search">Search</label>
4  <input required="" pattern=".*\S.*" type="search" class="input" id="search">
5  <span class="caret"></span>
6</form>          

  1 
  2.input {
  3  color: black;
  4  font: 1em/1.5 Hind, sans-serif;
  5}
  6 
  7form, .input, .caret {
  8  margin: auto;
  9}
 10 
 11form {
 12  position: relative;
 13  width: 100%;
 14  max-width: 17em;
 15}
 16 
 17.input, .caret {
 18  display: block;
 19  transition: all calc(1s * 0.5) linear;
 20}
 21 
 22.input {
 23  background: transparent;
 24  border-radius: 50%;
 25  box-shadow: 0 0 0 0.25em inset;
 26  caret-color: #255ff4;
 27  width: 2em;
 28  height: 2em;
 29  -webkit-appearance: none;
 30  -moz-appearance: none;
 31  appearance: none;
 32}
 33 
 34.input:focus, .input:valid {
 35  background: powderblue;
 36  border-radius: 0.25em;
 37  box-shadow: none;
 38  padding: 0.75em 1em;
 39  transition-duration: calc(1s * 0.25);
 40  transition-delay: calc(1s * 0.25);
 41  width: 100%;
 42  height: 3em;
 43}
 44 
 45.input:focus {
 46  animation: showCaret 1s steps(1);
 47  outline: transparent;
 48}
 49 
 50.input:focus + .caret, .input:valid + .caret {
 51  animation: handleToCaret 1s linear;
 52  background: transparent;
 53  width: 1px;
 54  height: 1.5em;
 55  transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
 56}
 57 
 58.input::-webkit-search-decoration {
 59  -webkit-appearance: none;
 60}
 61 
 62label {
 63  color: #e3e4e8;
 64  overflow: hidden;
 65  position: absolute;
 66  width: 0;
 67  height: 0;
 68}
 69 
 70.caret {
 71  background: black;
 72  border-radius: 0 0 0.125em 0.125em;
 73  margin-bottom: -0.6em;
 74  width: 0.25em;
 75  height: 1em;
 76  transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);
 77  transform-origin: 50% 0;
 78}
 79 
 80/* Animations */
 81@keyframes showCaret {
 82  from {
 83    caret-color: transparent;
 84  }
 85 
 86  to {
 87    caret-color: #255ff4;
 88  }
 89}
 90 
 91@keyframes handleToCaret {
 92  from {
 93    background: currentColor;
 94    width: 0.25em;
 95    height: 1em;
 96    transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);
 97  }
 98 
 99  25% {
100    background: currentColor;
101    width: 0.25em;
102    height: 1em;
103    transform: translate(0,-1em) rotate(-180deg) translate(0,0.875em);
104  }
105 
106  50%, 62.5% {
107    background: #255ff4;
108    width: 1px;
109    height: 1.5em;
110    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,2.5em);
111  }
112 
113  75%, 99% {
114    background: #255ff4;
115    width: 1px;
116    height: 1.5em;
117    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
118  }
119 
120  87.5% {
121    background: #255ff4;
122    width: 1px;
123    height: 1.5em;
124    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,0.125em);
125  }
126 
127  to {
128    background: transparent;
129    width: 1px;
130    height: 1.5em;
131    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
132  }
133}