Morphing search input
How do I make an morphing search input?
I see so many of these so I made one myself. Paying attention to timing and using minimal markup. . What is a morphing search input? How do you make a morphing search input? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.
Morphing search input - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>morphing search input</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="inputbox"> <input required="required"/> <button class="del" type="reset"></button>
</form>
</body>
</html>
Morphing search input - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
body { background: #5a279c; color: #fff;
}
.inputbox { height: 50px; width: 300px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.inputbox input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; padding: 16.5px 0; border: 0; background: none; width: 50px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 100%; -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; -webkit-transition-delay: 0s, 0.4s, 0s; transition-delay: 0s, 0.4s, 0s; box-shadow: 0 0 0 1px currentColor; color: inherit; cursor: pointer; padding: 16.5px 0; padding-right: 50px; font-weight: lighter; font-family: 'Roboto';
}
.inputbox input:focus, .inputbox input:valid { width: 100%; -webkit-transition-delay: 0.4s, 0s, 0.4s; transition-delay: 0.4s, 0s, 0.4s; outline: 0; border-radius: 0; cursor: text; padding-left: 16.5px;
}
.inputbox input:focus + .del, .inputbox input:valid + .del { pointer-events: all; left: calc(100% - 25px); -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
.inputbox input:focus + .del:focus, .inputbox input:valid + .del:focus { box-shadow: 0 0 0 1px currentColor; height: 37.5px; width: 37.5px;
}
.inputbox input:focus + .del:before, .inputbox input:valid + .del:before { -webkit-transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7); transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.inputbox input:focus + .del:after, .inputbox input:valid + .del:after { -webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7); transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7); -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.inputbox .del { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 50px; width: 50px; padding: 0; background: none; border-radius: 100%; border: 0; pointer-events: none; -webkit-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; -webkit-transition-delay: 0s; transition-delay: 0s; color: inherit; cursor: pointer;
}
.inputbox .del:focus { outline: none;
}
.inputbox .del:before { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; width: 1px; height: 37.5px; -webkit-transform: translate(32.25px, 32.25px) translate(-50%, -50%) rotate(-45deg) scaleY(1); transform: translate(32.25px, 32.25px) translate(-50%, -50%) rotate(-45deg) scaleY(1); -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
.inputbox .del:after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; width: 1px; height: 37.5px; -webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0); transform: translate(-50%, -50%) rotate(45deg) scaleY(0); -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
Developer | Gregor Adams |
Username | pixelass |
Uploaded | June 20, 2022 |
Rating | 4.5 |
Size | 3,250 Kb |
Views | 48,576 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Numbers cube counter | 5,310 Kb |
Pager-dots concept | 4,731 Kb |
RubiCSS cube | 12,148 Kb |
Pure CSS marching ants border | 3,837 Kb |
Cantor Set in CSS | 2,143 Kb |
SVG sine wave | 2,988 Kb |
Fractal curve generator | 13,870 Kb |
Diagonal scroll | 5,113 Kb |
Fractal tree | 5,511 Kb |
Material design upload button with progress | 3,374 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pericles mi loro... | Judag | 4,125 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Button Option Group | Honchoman | 1,859 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!