Input with Icon
An icon on the left of the field that wakes up on focus: it turns indigo, grows by 15% and tilts by 10° while the frame lights up. Any SVG icon you like.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Forms has 20 effects, including 2 free. Explore the category →
3 usage examples
How it works
The .iin-input field keeps a 48 px left padding; the .iin-icon, a 20 px SVG, sits in that padding with absolute positioning (left: 16px, vertically centred by top: 50% and translateY(-50%)). It ignores clicks: tapping the icon puts the caret in the field.
On focus, two rules work together. .iin-input:focus turns the 2 px border #6366f1 and tints the fill. .iin-input:focus ~ .iin-icon colours the icon indigo and adds scale(1.15) rotate(-10deg) to the vertical centring, over 0.3 s on a cubic-bezier(.4, 0, .2, 1) curve. The small tilt makes the icon look as if it answers the click; everything returns to place when the field loses focus.
The "Email" text (.iin-caption) above the field is its label; the you@email.com placeholder is only an input example. The .fx-0288-root root is just the demo frame (300 px, #0a0a0f background).
Accessibility
- Label separate from the example: "Email" stays visible and names the field for screen readers, even once the placeholder has vanished under the input.
- Decorative icon: the SVG carries
aria-hidden="true"andfocusable="false", so it is neither read nor reached by keyboard. - Form:
type="email",name="email"andautocomplete="email"are supplied; the browser checks the format, offers the saved address and opens the email keyboard on phones. - Reduced motion: under
prefers-reduced-motion: reduce, the icon only changes colour, with no growth or tilt, and the frame lights up without a transition. - Focus: the 2 px indigo frame on
#0a0a0freaches 4.4:1, above the 3:1 minimum for a focus indicator.
Browser compatibility
CSS transforms and transitions plus one width variable: Chrome 49, Firefox 31, Safari 9.1. Checked in Chromium, Firefox and WebKit: a second copy animates on its own while the first stays still, by click, Tab and touch, at 390 px and under reduced motion. The captures show typing and field-to-field moves simulated by the scene script, which is not included in the code you buy.
Without transitions, icon and frame switch at once; without CSS variables, the width falls back to the parent element's.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0288-root">
<label class="iin-field">
<span class="iin-caption">Email</span>
<span class="iin-box">
<input class="iin-input" type="email" name="email" autocomplete="email" placeholder="you@email.com">
<span class="iin-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" focusable="false">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</span>
</span>
</label>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Icon (HTML — SVG inside .iin-icon) |
20 × 20 envelope | Any SVG using stroke="currentColor" automatically takes the grey then the indigo. A filled icon needs fill="currentColor". |
Icon motion (CSS — transform of the :focus ~ .iin-icon rule) |
scale(1.15) rotate(-10deg) |
Always keep translateY(-50%) first in the value, or the icon leaves its axis. rotate(0) for a plain enlargement. |
Width (CSS — --iin-width) |
280 px | 100% to fill a column or a widget; capped by max-width: 100%. |
| Colours (CSS) | icon #8b8b93 → #6366f1, frame rgba(255, 255, 255, .1) → #6366f1 |
Four values in .iin-icon, .iin-input and their :focus rules. |
Visible label (HTML — .iin-caption) |
"Email" above | Remove it only when the context already names the field (message bar, search); then put aria-label on the field. |
Duration (CSS — transition) |
0.3 s | Same duration for frame and icon; beyond 0.4 s the tilt feels sluggish. |
FAQ
left: 16px with right: 16px on .iin-icon and move the 48 px padding to the right (padding: 14px 48px 14px 16px). The −10° tilt looks fine either way.:hover rule if you want an earlier hint.id and no script, each <label class="iin-field"> animates its own icon. Just change the SVG, the label and the type, name and autocomplete attributes.
