Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
morphing search input
form.inputbox
input(type=text required)
button.del(type="reset")

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.

@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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.