morphing search input

index.pug

form.inputbox
  input(type=text required)
  button.del(type="reset")

morphing-search-input.markdown

morphing search input

I see so many of these so I made one myself.

Paying attention to timing and using minimal markup.

• using the input as the lens
• using the reset button as the handle/"x"
• no awkwardly shaped or rounded elements

A Pen by Gregor Adams on CodePen.

License.

style.scss

@import url(http://fonts.googleapis.com/css?family=Roboto:300);

body {
  background: #5a279c;
  color: #fff;
}

$size: 50px;
$width: 300px;
$stroke: 1px;
$speed: 0.4s;

.inputbox {
  height: $size;
  width: $width;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
    padding: ($size - 16 - 1)/2 0;
    border: 0;
    background: none;
    width: $size;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    transition: width $speed ease-in-out, border-radius $speed ease-in-out, padding $speed/2;
    transition-delay: 0s, $speed, 0s;
    box-shadow: 0 0 0 $stroke currentColor;
    color: inherit;
    cursor: pointer;
    padding: ($size - 16 - 1)/2 0;
    padding-right: $size;
    font-weight: lighter;
    font-family: 'Roboto';

    &:focus, &:valid {
      width: 100%;
      transition-delay: $speed, 0s, $speed;
      outline: 0;
      border-radius: 0;
      cursor: text;
      padding-left: ($size - 16 - 1)/2;

      
      +.del {
        pointer-events: all;
        left: calc(100% - #{$size/2});
        transition-delay: $speed;
        
        &:focus {
          box-shadow: 0 0 0 1px currentColor;
          height: $size/4*3;
          width: $size/4*3;
        }
      &:before {
          transform: translate(-50%,-50%) rotate(-45deg) scaleY(0.7);
          transition-delay: 0s;

        }
       &:after {
         transform: translate(-50%,-50%) rotate(45deg) scaleY(0.7);
          transition-delay: $speed/2;

        }
      }
    }
  }
  
  .del {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: $size;
    width: $size;
    padding: 0;
    background: none;
    border-radius: 100%;
    border: 0;
    pointer-events: none;
    transition: left $speed ease-in-out;
    transition-delay: 0s;
    color: inherit;
    cursor: pointer;
   
    &:focus {
      outline: none;
    }

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background:  currentColor;
      width: $stroke;
      height: $size/4*3;
      transform: translate($size/8*5 + 1,$size/8*5 + 1) translate(-50%,-50%) rotate(-45deg) scaleY(1);
      transition: transform $speed/2 ease-in-out;
      transition-delay: $speed*1.5;
  }
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background:  currentColor;
      width: $stroke;
      height: $size/4*3;
      transform: translate(-50%,-50%) rotate(45deg) scaleY(0);
      transition: transform $speed/2 ease-in-out;
      transition-delay: $speed;
    }
  }

}